在vue中对数组值变化的监听与重新响应渲染操作

日落沧海看夕阳,万丈霞光谱辉煌。轻叹美景难留住,只因月色要锋芒!你在桥上看风景,看风景的人在桥下看你。你只知道自己吃了韭菜盒子,却不知道别人在盒子里还加了鸡蛋。

在我们项目开发过程中,实例中的数据类型可以是对象、数组等。在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求。或者查阅这篇文章

例如:

<script>
 export default {
 data(){
 return {
 objVal: {
  name: 'obj',
  type: 'obj'
 }
 }
 },
 watch:{
 objVal:{
 handler(val,oldval){
 
 },
 deep: true,
 }
 },
 methods:{
 changeObj(){
 this.objVal.name = 'newobj';
 }
 }
 }
</script>

但是,在使用同一种方式进行数组值更改监听时,这种做法是无效的。

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 watch: {
 arrList: {
 handler(val, oldval) {
 
 },
 deep: true
 }
 },
 methods: {
 changeArr() {
 // 无效
 this.arrList[0] = 10;
 }
 }
};
</script>

上述用以监听数组值变化的方法是无效的,vue是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式,即可让vue响应数组数据的变化。具体操作如下:

使用方法:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

具体使用案例:

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 methods: {
 changeArr() {
 // this.arrList[0] = 10;
 // 修改为:
 this.arrList.splice(0, 1, 10);
 }
 }
};
</script>

或:

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 methods: {
 changeArr() {
 // this.arrList[0] = 10;
 // 修改为:
 this.$set(this.arrList, 0, 10);
 }
 }
};
</script>

以上两种方式,均可达到监听数组值变化的效果。

补充知识:vue数组操作不触发前端重新渲染

暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决。

此外,能够监听的数组变异方法

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95

还有就是set

以上就是在vue中对数组值变化的监听与重新响应渲染操作。有时,你不得不相信,有些人注定只能停留在你的心中,却不克不及留在你的生活中。更多关于在vue中对数组值变化的监听与重新响应渲染操作请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
vue中对虚拟dom的理解知识点总结

详解Vue3中对VDOM的改进

nuxt框架中对vuex进行模块化设置的如何实现方法

Vue中对iframe如何实现keep alive无刷新的方法

Vue.javascript中对css的操作(修改)具体方式详解