Vue不能观察到数组length的变化

发布时间：2020-12-17 03:12:05 所属栏目：百科来源：网络整理

导读：由于 JavaScript 的限制，Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 因为vue的响应式是通过 Object.defineProperty 来实现的，但是

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength

因为vue的响应式是通过 Object.defineProperty 来实现的，但是数组的length属性是不能添加getter和setter，所有无法通过观察length来判断。

为什么Vue不能观察到数组length的变化

如下代码，虽然看起来数组的length是10，但是for in的时候只能遍历出0,1,2，导致了只有前三个索引被加上了getter 和setter

那么vue提供了一些解决方法

使用内置的Vue.$set

让数组显式的进行某个索引的观察 Vue.set(array,indexOfItem,newValue)

实际上是调用了

这样可以手动指定需要观察的key，那么就可以达到预期的效果。

重写了 push,pop,shift,unshift,splice,sort,reverse方法

Vue源码

/**

Intercept mutating methods and emit events
*/
;[
'push','pop','shift','unshift','splice','sort','reverse'
]
.forEach(function (method) {
// cache original method
const original = arrayProto[method]
def(arrayMethods,method,function mutator (...args) {
const result = original.apply(this,args)
const ob = this.ob
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
// notify change
ob.dep.notify()
return result
})
})

这些是在Array.__proto__上进行了方法重写或者添加

并且对添加属性的方法如 push，unshift，splice 所添加进来的新属性进行手动观察，源码为

对以上方法进行了手动的进行消息触发

结论

vue对数组的length直接改变无法直接进行观察，提供了vue.$set 进行显式观察，并且重写了 push,reverse方法来进行隐式观察。

以上所述是小编给大家介绍的Vue不能观察到数组length的变化。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!