为什么vue不能观察到数组length的变化？ -凯发ag旗舰厅登录网址下载

凯发ag旗舰厅登录网址下载官网解释如下

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

因为vue的响应式是通过object.defineproperty来实现的，但是数组的length属性是不能添加getter和setter，所有无法通过观察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 methodconst original = arrayproto[method]def(arraymethods, method, function mutator (...args) {const result = original.apply(this, args)const ob = this.__ob__let insertedswitch (method) {case 'push':case 'unshift':inserted = argsbreakcase 'splice':inserted = args.slice(2)break}if (inserted) ob.observearray(inserted)// notify changeob.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方法来进行隐式观察。

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的为什么vue不能观察到数组length的变化？的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。