Vue2.0 不能检测数组和对象的解决方案?

106 阅读1分钟

关于这个问题,我们可以拆分开来讨论,同时针对vue能够监听的场景和无法监听的场景进行讨论,并给出对应的解决方案:

监听数组的变化:

1)vue 能够监听数组变化的场景

通过赋值的形式改变正在被监听的数组; 通过splice(index, num, val) 的形式改变正在被监听的数组; 通过数组的push的形式改变正在被监听的数组; 2)vue 无法监听数组变化的场景

通过数组索引改变数组元素的值; 改变数组的长度; 3)vue 无法监听数组变化的解决方案

this.$set(arr, index, newVal); 通过splice(index,num,val); 使用临时变量作为中转,重新赋值数组; 监听对象的变化:

1)vue 能够监听对象变化的场景

通过直接赋值的场景; e.g:watchObj = {name:“zyk”} 2)vue 无法监听对象变化的场景

对象的增加、删除、修改无法被vue监听到 3)vue 无法监听对象变化的解决方案

使用this.s e t ( o b j e c t , k e y , v a l u e ) ( v u e 无法监听 t h i s . set(object, key, value)(vue无法监听this.set(object,key,value)(vue无法监听this.set修改原有属性) 使用 Object.assign(),直接赋值的原理;(深拷贝,推荐使用)。 关于 Object.assign() — MDN 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。 其实使用 Object.assign() 也是基于深拷贝的实现原理,如果大家对深拷贝不太清楚,请移步至:浅拷贝 VS 深拷贝,并且手写一个深拷贝(深克隆)