vue中v-for 深度循环数组页面不更新的问题

vue2中对对象和数组实现响应式的时,是无法侦测到对象的增加和删除 ,另外直接修改数组的长度或者利用数组下标修改某一项,页面是不发生更新的。很重要的原因是vue2在做数据劫持的时候是用Object.definePropery()来递归遍历data中的对象 ,从而进行收集依赖,绑定watcher等等相关操作。而Object.definePropery()方法只能对某个属性值进行监听和操作 ,对于data中增加或者删除属性,vue2中是无法做到响应式的,所以在vue2中增加了delete方法来进行data中对象属性新增操作;

而对于数组的修改则可以通过数组的一系列方法也可以实现响应式,因为在vue2中对数组进行了特殊处理以及数组方法的重写,比如push,splice,unshift等。

另外对于项目中有些需求可能要嵌套循环数组来展示页面 , 当子数组发生修改时页面就无法侦测到变化 ,此时可以在操作数组数据后使用$forceUpdate方法来强制页面更新。

ps:这篇小结只是总结下项目中遇到的问题,如果有啥更好的解决办法 ,希望有大佬回答 ,以及文中有啥错误的请指出,感谢!

你可能感兴趣的:(vue中v-for 深度循环数组页面不更新的问题)