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