您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue不能觀察到數(shù)組length的變化怎么辦,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
由于 JavaScript 的限制,Vue 不能檢測以下變動的數(shù)組: 當(dāng)你利用索引直接設(shè)置一個項時,例如:vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時,例如:vm.items.length = newLength
因為vue的響應(yīng)式是通過 Object.defineProperty 來實現(xiàn)的,但是數(shù)組的length屬性是不能添加getter和setter,所有無法通過觀察length來判斷。
為什么Vue不能觀察到數(shù)組length的變化
如下代碼,雖然看起來數(shù)組的length是10,但是for in的時候只能遍歷出0, 1, 2,導(dǎo)致了只有前三個索引被加上了getter 和setter
var a = [0, 1, 2] a.length = 10 // 只是顯示的給length賦值,索引3-9的對應(yīng)的value也會賦值undefined // 但是索引3-9的key都是沒有值的 // 我們可以用for-in打印,只會打印0,1,2 for (var key in a) { console.log(key) // 0,1,2 }
那么vue提供了一些解決方法
使用內(nèi)置的Vue.$set
讓數(shù)組顯式的進行某個索引的觀察 Vue.set(array, indexOfItem, newValue)
實際上是調(diào)用了
Object.defineProperty(array, indexOfItem, { enumerable: true, configurable: true, get() { }, set(newVal) { } })
這樣可以手動指定需要觀察的key,那么就可以達到預(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__上 進行了方法重寫或者添加
并且對添加屬性的方法如 push,unshift,splice 所添加進來的新屬性進行手動觀察,源碼為
if (inserted) ob.observeArray(inserted)
對以上方法進行了手動的進行消息觸發(fā)
ob.dep.notify()
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Vue不能觀察到數(shù)組length的變化怎么辦”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。