vue中實現(xiàn)監(jiān)聽數(shù)組內(nèi)部元素
vue監(jiān)聽數(shù)組內(nèi)部元素
在VUE中,對數(shù)組的監(jiān)聽是淺監(jiān)聽,也就是它只能監(jiān)聽到數(shù)組的長度或者有無的變化,當我們修改數(shù)組中的某一個值時,也就是數(shù)組的長度狀態(tài)并沒有改變時,在正常情況下它是無法監(jiān)聽到的,在watch中我們知道可以使用deep屬性進行深監(jiān)聽,那么在其他情況下呢?
我們有兩種辦法解決此問題
1.通過原生的js對數(shù)組先進行切割,然后在添加新的內(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.js開發(fā)微信小程序開源框架mpvue解析
這篇文章主要介紹了使用Vue.js開發(fā)微信小程序開源框架mpvue解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03vue中數(shù)組常用的6種循環(huán)方法代碼示例
在vue項目開發(fā)中,我們需要對數(shù)組進行處理等問題,這里簡單記錄遍歷數(shù)組的幾種方法,這篇文章主要給大家介紹了關(guān)于vue中數(shù)組常用的6種循環(huán)方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03vue中@click和@click.native.prevent的區(qū)別
這篇文章主要介紹了vue中@click和@click.native.prevent的區(qū)別,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04