欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-28 22:06:51
由于 javascript 的限制,vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexofitem] = newvalue...

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

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

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

使用内置的vue.$set

让数组显式的进行某个索引的观察 vue.set(array, indexofitem, newvalue)

实际上是调用了

object.defineproperty(array, indexofitem, {
 enumerable: true,
 configurable: true,
 get() { },
 set(newval) { }
})

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

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

vue源码

const arrayproto = array.prototype
export const arraymethods = object.create(arrayproto)

/**
 * 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 所添加进来的新属性进行手动观察,源码为

if (inserted) ob.observearray(inserted)

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

ob.dep.notify()

结论

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

以上所述是小编给大家介绍的vue不能观察到数组length的变化,希望对大家有所帮助