官網解釋如下

由于 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方法來進行隱式觀察。

總結

以上是生活随笔為你收集整理的为什么Vue不能观察到数组length的变化？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。