Vue不能观察到数组length的变化
由于JavaScript的限制,Vue不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem]=newValue当你修改数组的长度时,例如:vm.items.length=newLength
因为vue的响应式是通过Object.defineProperty来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断。
为什么Vue不能观察到数组length的变化
如下代码,虽然看起来数组的length是10,但是forin的时候只能遍历出0,1,2,导致了只有前三个索引被加上了getter和setter
vara=[0,1,2] a.length=10 //只是显示的给length赋值,索引3-9的对应的value也会赋值undefined //但是索引3-9的key都是没有值的 //我们可以用for-in打印,只会打印0,1,2 for(varkeyina){ 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源码
constarrayProto=Array.prototype exportconstarrayMethods=Object.create(arrayProto) /** *Interceptmutatingmethodsandemitevents */ ;[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ] .forEach(function(method){ //cacheoriginalmethod constoriginal=arrayProto[method] def(arrayMethods,method,functionmutator(...args){ constresult=original.apply(this,args) constob=this.__ob__ letinserted switch(method){ case'push': case'unshift': inserted=args break case'splice': inserted=args.slice(2) break } if(inserted)ob.observeArray(inserted) //notifychange ob.dep.notify() returnresult }) })
这些是在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的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!