欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue2中無法檢測到數(shù)組變動的原因及解決

 更新時間：2021年06月17日 08:36:10   作者：我是樊少  
由于某些限制，vue2不能檢測到某些情況下數(shù)組的變動，本文就將具體講解這兩種限制的解決思路

由于JavaScript 的限制，Vue 不能檢測以下數(shù)組的變動：

  • 當利用索引直接設置一個數(shù)組項時，例如：vm.items[indexOfItem] = newValue
  • 當修改數(shù)組的長度時，例如：vm.items.length = newLength
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的

解決方法

手動添加監(jiān)聽
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
使用數(shù)組的變異方法，因為vue對數(shù)組的變異方法實現(xiàn)了響應式
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

為什么Vue2.0中監(jiān)聽不到兩種數(shù)組的變化？

官方文檔中對于這兩點都是簡要的概括為“由于JavaScript的限制”無法實現(xiàn)，而Object.defineProperty是實現(xiàn)檢測數(shù)據(jù)改變的方案，那這個限制是指Object.defineProperty嗎？

其實原因并不是因為Object.defineProperty()存在漏洞，而是出于性能問題的考慮。 Object.defineProperty 在數(shù)組中的表現(xiàn)和在對象中的表現(xiàn)是一致的，數(shù)組的索引就可以看做是對象中的 key 。

  • 通過索引訪問或設置對應元素的值時，可以觸發(fā) getter 和 setter 方法
  • 通過 push 或 unshift 會增加索引，對于新增加的屬性，需要再手動初始化才能被 observe 。
  • 通過 pop 或 shift 刪除元素，會刪除并更新索引，也會觸發(fā) setter 和 getter 方法。

所以， Object.defineProperty 是有監(jiān)控數(shù)組下標變化的能力的，只是vue2.x放棄了這個特性。

源碼分析

Object.property是可以檢測到通過索引改變數(shù)組的操作的，而Vue沒有實現(xiàn)。那我們看看源碼：

Vue3.0

Vue3.0中則用proxy代替了Object.defineProperty()解決了其存在的問題

以上就是Vue2中無法檢測到數(shù)組變動的原因及解決的詳細內(nèi)容，更多關于Vue2 數(shù)組變動的資料請關注腳本之家其它相關文章！

相關文章

最新評論