Vue2中無法檢測到數(shù)組變動(dòng)的原因及解決
由于JavaScript 的限制，Vue 不能檢測以下數(shù)組的變動(dòng)：
- 當(dāng)利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
- 當(dāng)修改數(shù)組的長度時(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)聽 // Vue.set Vue.set(vm.items, indexOfItem, newValue) vm.$set(vm.items, indexOfItem, newValue) 使用數(shù)組的變異方法，因?yàn)関ue對數(shù)組的變異方法實(shí)現(xiàn)了響應(yīng)式 // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
為什么Vue2.0中監(jiān)聽不到兩種數(shù)組的變化？
官方文檔中對于這兩點(diǎn)都是簡要的概括為“由于JavaScript的限制”無法實(shí)現(xiàn)，而Object.defineProperty是實(shí)現(xiàn)檢測數(shù)據(jù)改變的方案，那這個(gè)限制是指Object.defineProperty嗎？
其實(shí)原因并不是因?yàn)镺bject.defineProperty()存在漏洞，而是出于性能問題的考慮。 Object.defineProperty 在數(shù)組中的表現(xiàn)和在對象中的表現(xiàn)是一致的，數(shù)組的索引就可以看做是對象中的 key 。
- 通過索引訪問或設(shè)置對應(yīng)元素的值時(shí)，可以觸發(fā) getter 和 setter 方法
- 通過 push 或 unshift 會(huì)增加索引，對于新增加的屬性，需要再手動(dòng)初始化才能被 observe 。
- 通過 pop 或 shift 刪除元素，會(huì)刪除并更新索引，也會(huì)觸發(fā) setter 和 getter 方法。
所以， Object.defineProperty 是有監(jiān)控?cái)?shù)組下標(biāo)變化的能力的，只是vue2.x放棄了這個(gè)特性。
源碼分析
Object.property是可以檢測到通過索引改變數(shù)組的操作的，而Vue沒有實(shí)現(xiàn)。那我們看看源碼：
Vue3.0
Vue3.0中則用proxy代替了Object.defineProperty()解決了其存在的問題
以上就是Vue2中無法檢測到數(shù)組變動(dòng)的原因及解決的詳細(xì)內(nèi)容，更多關(guān)于Vue2 數(shù)組變動(dòng)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)一個(gè)圖片懶加載的插件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue+axios實(shí)現(xiàn)登錄攔截的實(shí)例代碼
本篇文章主要介紹了vue+axios實(shí)現(xiàn)登錄攔截的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue3+TS實(shí)現(xiàn)語音播放組件的示例代碼
這篇文章主要介紹了如何利用Vue+TS實(shí)現(xiàn)一個(gè)簡易的語音播放組件，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-03-03
通常我們的項(xiàng)目會(huì)越做越大,頁面也會(huì)越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護(hù),下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue運(yùn)行環(huán)境搭建全過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要給大家介紹了關(guān)于Vue使用虛擬鍵盤及中英文切換的相關(guān)資料,有時(shí)候在大型觸屏設(shè)備(如雙屏設(shè)備)中往往就沒有鍵盤去操作,所以就需要去建立一個(gè)虛擬鍵盤去操作,需要的朋友可以參考下2023-06-06
手寫可拖動(dòng)穿梭框組件CustormTransfer vue實(shí)現(xiàn)示例
這篇文章主要為大家介紹了手寫可拖動(dòng)穿梭框組件CustormTransfer vue實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue中el-tree?橫向滾動(dòng)條的實(shí)現(xiàn)
本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動(dòng)條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實(shí)現(xiàn)橫向滾動(dòng)功能,感興趣的可以了解一下2024-09-09
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue 過渡（動(dòng)畫）transition組件案例詳解
這篇文章主要介紹了Vue 過渡（動(dòng)畫）transition組件案例詳解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01