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

前端之家收集整理的这篇文章主要介绍了Vue不能观察到数组length的变化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

由于 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

显示的给length赋值,索引3-9的对应的value也会赋值undefined // 但是索引3-9的key都是没有值的 // 我们可以用for-in打印,只会打印0,2 for (var key in a) { console.log(key) // 0,2 }

那么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的变化。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/31966.html

猜你在找的Vue相关文章