亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue2中無(wú)法檢測(cè)到數(shù)組變動(dòng)的原因及解決

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

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

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

解決方法

手動(dòng)添加監(jiān)聽(tīng)
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
使用數(shù)組的變異方法，因?yàn)関ue對(duì)數(shù)組的變異方法實(shí)現(xiàn)了響應(yīng)式
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

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

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

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

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

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

源碼分析

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

Vue3.0

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

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

相關(guān)文章

最新評(píng)論