vue中實(shí)現(xiàn)監(jiān)聽數(shù)組內(nèi)部元素
vue監(jiān)聽數(shù)組內(nèi)部元素
在VUE中，對(duì)數(shù)組的監(jiān)聽是淺監(jiān)聽，也就是它只能監(jiān)聽到數(shù)組的長(zhǎng)度或者有無的變化，當(dāng)我們修改數(shù)組中的某一個(gè)值時(shí)，也就是數(shù)組的長(zhǎng)度狀態(tài)并沒有改變時(shí)，在正常情況下它是無法監(jiān)聽到的，在watch中我們知道可以使用deep屬性進(jìn)行深監(jiān)聽，那么在其他情況下呢？
我們有兩種辦法解決此問題
1.通過原生的js對(duì)數(shù)組先進(jìn)行切割，然后在添加新的內(nèi)容（也就是我們要修改的內(nèi)容）
array.splice(i, 1, newdata); ? ?//從i位置開始 ?刪除1個(gè)元素并用newdata來替代它
2.使用vue提供的函數(shù)$set
$set(array,i,newdata); ? //把a(bǔ)rray數(shù)組的第i的值替換為newdata
vue如何監(jiān)聽數(shù)組的變化
修改了數(shù)組對(duì)象的原型，在原本的原型鏈上插入了一個(gè)新的原型對(duì)象，在新的原型對(duì)象上重寫了7個(gè)變異方法（push/pop/unshift/shift/splice/sort/reverse）
var arrayProto = Array.prototype
var newArrayProto = Object.create(arrayProto)
newArrayProto.push = function (...rest) {
// 監(jiān)聽到調(diào)用了數(shù)組的push方法，執(zhí)行視圖渲染的代碼
console.log('監(jiān)聽到調(diào)用了數(shù)組的push方法，執(zhí)行視圖渲染的代碼，添加之前的邏輯。。。。')
// 為了保留原來的數(shù)組push方法的邏輯
arrayProto.push.call(this, ...rest)
console.log('數(shù)組push方法添加之后的邏輯，。。。。。')
}
// 在遞歸遍歷數(shù)據(jù)的時(shí)候，只要找到數(shù)組數(shù)據(jù)，就將其原型指向?yàn)閚ewArrayProto
// arr.__proto__ = newArrayProto
var arr = [1,2,3]
arr.__proto__ = newArrayProto
為什么沒有像對(duì)象一樣用Object.defineProperty監(jiān)聽數(shù)組中所有的元素變化呢？
因?yàn)閿?shù)組中的元素有可能有很多個(gè)，如果循環(huán)遍歷，開銷太大！不能這樣。。。Vue給我們提供了支持驅(qū)動(dòng)視圖的API（this.$set,Vue.set），還有重寫了7個(gè)變異方法
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
給大家講解一下vue組件發(fā)布到npm簡(jiǎn)單方法和步驟過程，需要的朋友一起學(xué)習(xí)參考一下。2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文字滾動(dòng)效果，公告滾動(dòng)播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VUE和Antv G6實(shí)現(xiàn)在線拓?fù)鋱D編輯操作
這篇文章主要介紹了VUE和Antv G6實(shí)現(xiàn)在線拓?fù)鋱D編輯操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了Vue在css中圖片路徑問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)算屬性的學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
element-ui?form表單的動(dòng)態(tài)rules校驗(yàn)功能實(shí)現(xiàn)
在vue項(xiàng)目中，有時(shí)候可能會(huì)用到element-ui?form表單的動(dòng)態(tài)rules校驗(yàn)，這篇文章主要介紹了element-ui form表單的動(dòng)態(tài)rules校驗(yàn),我們可以巧妙的運(yùn)用element-ui form表單里面form-item的校驗(yàn)規(guī)則來處理，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
詳解Vue Elememt-UI構(gòu)建管理后臺(tái)
本篇文章給大家詳細(xì)分享了Vue Elememt-UI構(gòu)建管理后臺(tái)的過程以及相關(guān)代碼實(shí)例，一起參考學(xué)習(xí)下。2018-02-02
vue-axios的使用以及axios請(qǐng)求賦值為空的問題
這篇文章主要介紹了vue-axios的使用以及axios請(qǐng)求賦值為空的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
antd?Vue實(shí)現(xiàn)Login登錄頁面布局案例詳解?附帶驗(yàn)證碼驗(yàn)證功能
這篇文章主要介紹了antd?Vue實(shí)現(xiàn)Login登錄頁面布局案例詳解附帶驗(yàn)證碼驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05