由于 JavaScript 的限制，Vue 不能檢測以下變動(dòng)的數(shù)組： 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue 當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length = newLength

因?yàn)関ue的響應(yīng)式是通過 Object.defineProperty 來實(shí)現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無法通過觀察length來判斷。

為什么Vue不能觀察到數(shù)組length的變化

如下代碼，雖然看起來數(shù)組的length是10，但是for in的時(shí)候只能遍歷出0, 1, 2，導(dǎo)致了只有前三個(gè)索引被加上了getter 和setter

var a = [0, 1, 2]
a.length = 10
// 只是顯示的給length賦值，索引3-9的對應(yīng)的value也會(huì)賦值undefined
// 但是索引3-9的key都是沒有值的
// 我們可以用for-in打印，只會(huì)打印0,1,2
for (var key in a) {
 console.log(key) // 0,1,2
}

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

使用內(nèi)置的Vue.$set

讓數(shù)組顯式的進(jìn)行某個(gè)索引的觀察 Vue.set(array, indexOfItem, newValue)

實(shí)際上是調(diào)用了

Object.defineProperty(array, indexOfItem, {
 enumerable: true,
 configurable: true,
 get() { },
 set(newVal) { }
})

這樣可以手動(dòng)指定需要觀察的key，那么就可以達(dá)到預(yù)期的效果。

重寫了 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__上 進(jìn)行了方法重寫或者添加

并且對添加屬性的方法如 push，unshift，splice 所添加進(jìn)來的新屬性進(jìn)行手動(dòng)觀察，源碼為

if (inserted) ob.observeArray(inserted)

對以上方法進(jìn)行了手動(dòng)的進(jìn)行消息觸發(fā)

ob.dep.notify()

結(jié)論

vue對數(shù)組的length直接改變無法直接進(jìn)行觀察，提供了vue.$set 進(jìn)行顯式觀察，并且重寫了 push, pop, shift, unshift, splice, sort, reverse方法來進(jìn)行隱式觀察。

以上所述是小編給大家介紹的Vue不能觀察到數(shù)組length的變化，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com