Vue中修改数组长度或数组内某个值时无法更新情况


前言-Vue中改变了数据页面却不刷新

最近刚开始实习,导师给的任务很简单,做某个Table行数据的删除。在清空整个data数组时,用到了两种方法

this.formData = [] // 直接用一个空数组覆盖
this.formData.length = [] // 设置length为0进行清空

但是这两种方式都是无法触发Vue中的响应,在中也有解释,并且推荐了解决方案为:使用set方法或splice方法。


原因

因为vue实现双向数据绑定的机制是数据劫持,也就是在所有对象上有个Object.defineProperty()方法,通过监听set,get方法去实现,而数组没有这两个方法,所以就不会更新view。例如像数组的length熟悉是不能添加getter和setter,所有无法通过观察length来判断。

解决方案就是,需要我们主动通知vue。

翻阅Vue源码中的array.js(vue/src/core/observer/array.js)可以知道其重写了push、pop、shift、unshift、splice、sort、reverse这几个数组方法,只要我们使用这几个方法去操作数组,就会触发Vue中的数据响应,从而更新数组。


总结

如果某个数组数据需要双向绑定更新,那么每次操作时必须要用到上面提到的Vue中重写了的数组方法。 ps:多看看官方文档才是正解,很多问题搜不到或弄不懂,其实在官方文档里写的很清楚了。

经验分享 程序员 微信小程序 职场和发展