Vue2中無法檢測到陣列變動的原因及解決
阿新 • • 發佈:2021-06-19
目錄
- 解決方法
由於javascript 的限制,vue 不能檢測以下陣列的變動:
- 當利用索引直接設定一個數組項時,例如:vm.items[indexOfItem] = newValue
- 當修改陣列的長度時,例如:vm.items.length = newLength
var vm = new Vue({
data: {
items: ['a','b','c']
}
})
vm.items[1] = 'x' // 不是響應性的
程式設計客棧vm.items.length = 2 // 不是響應性的
解決方法
手動新增監聽 // Vue.set Vue.set(vm.items,indexOfItem,newValue) vm.$set(vm.items,newValue) 使用陣列的變異方法,因為vue對陣列的變異方法實現了響應式 // Array.prototype.程式設計客棧splice vm.items.splice(indexOfItem,1,newValue)
為什麼Vue2.0中監聽不到兩種陣列的變化?
官方文件中對於這兩點都是簡要的概括為“由於javaScript的限制”無法實現,而Object.defineProperty是實現檢測資料改變的方案,那這個限制是指Object.defineProperty嗎?
其實原因並不是因為Object.defineProperty()存在漏洞,而是出於效能問題的考慮。 ObjxPIZWtect.definePrope程式設計客棧rty 在陣列中的表現和在物件中的表現是一致的,陣列的索引就可以看做是物件中的 key 。
- 通過索引訪問或設定對應元素的值時,可以觸發 getter 和 setter 方法
- 通過 push 或 unshttp://www.cppcns.comhift 會增加索引,對於新增加的屬性,需要再手動初始化才能被 observe 。
- 通過 pop 或 shift 刪除元素,會刪除並更新索引,也會觸發 setter 和 getter 方法。
所以, Object.defineProperty 是有監控陣列下標變化的能力的,只是vue2.x放棄了這個特性。
原始碼分析
Object.property是可以檢測到通過索引改變陣列的操作的,而Vue沒有實現。那我們看看原始碼:
Vue3.0
Vue3.0中則用proxy代替了Object.defineProperty()解決了其存在的問題
以上就是Vue2中無法檢測到陣列變動的原因及解決的詳細內容,更多關於Vue2 陣列變動的資料請關注我們其它相關文章!