Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題

第Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題目錄一、數(shù)組1.不能監(jiān)聽的情況2.替代做法3.注意二、對象1.不能監(jiān)聽的情況2.替代做法三、分析vue2無法監(jiān)聽數(shù)組和對象的這些變化的原因1.對于數(shù)組2.對象四、vue3響應(yīng)式原理關(guān)于vue監(jiān)聽的一些問題對象的監(jiān)聽數(shù)組的監(jiān)聽

一、數(shù)組

1.不能監(jiān)聽的情況

（1）直接通過下標(biāo)賦值arr[i]=value

（2）直接修改數(shù)組長度arr.length=newLen

2.替代做法

（1）修改值

Vue.set(arr,index,newvalue)

vm.$set(arr,index,newvalue)

arr.splice(index,1,newvalue)

（2）修改數(shù)組長度，

arr.splice(newLen)

3.注意

調(diào)用數(shù)組的pop、push、shift、unshift、splice、sort、reverse等方法時是可以監(jiān)聽到數(shù)組的變化的

vue內(nèi)部相當(dāng)于重寫了數(shù)組的原型，劫持了這七個方法

二、對象

1.不能監(jiān)聽的情況

屬性的新增和刪除

obj.newkey=newvalue

deleteobj.key

2.替代做法

//新增

Vue.set(obj,newkey,newvalue)

vm.$set(obj,newkey,newvalue)

obj=Object.assign({},obj,{newkey1:newvalue1,newkey2:newvalue2})

//刪除

Vue.delete(obj,key)

vm.$delete(obj,key)

三、分析vue2無法監(jiān)聽數(shù)組和對象的這些變化的原因

首先，vue2是通過Object.defineProperty(obj,key,value)這種方式監(jiān)聽數(shù)據(jù)的

1.對于數(shù)組

Object.defineProperty()是可以對數(shù)組實(shí)現(xiàn)監(jiān)聽操作的，但是vue并沒有實(shí)現(xiàn)這個功能，因?yàn)閿?shù)組長度不定而且數(shù)據(jù)可能會很多，如果對每一個數(shù)據(jù)都實(shí)現(xiàn)監(jiān)聽，性能代價(jià)太大

但是注意：數(shù)組中的元素是引用類型時是會被監(jiān)聽的

2.對象

Object.defineProperty()針對的是對象的某個屬性，而且這個操作在vue的初始化階段就完成了，所以新增的屬性無法監(jiān)聽，通過set方法新增對象就相當(dāng)于初始化階段的數(shù)據(jù)響應(yīng)式處理

四、vue3響應(yīng)式原理

vue3是通過proxy直接代理整個對象來實(shí)現(xiàn)的，而不是像Object.defineProperty針對某個屬性。

所以，只需做一層代理就可以監(jiān)聽同級結(jié)構(gòu)下的所有屬性變化，包括新增屬性和刪除屬性

關(guān)于vue監(jiān)聽的一些問題

對象的監(jiān)聽

vue通過object.defineProperty將對象的key轉(zhuǎn)化成getter/setter的形式來追蹤變化，但是這種追蹤方式只能追蹤到數(shù)據(jù)的修改，對象的屬性的刪除和增加，這種形式追蹤不到。為此vue提供可$set和$delete兩種API來配合使用，解決監(jiān)聽不到屬性新增刪除問題。

*需要特別注意，在使用$set時，需要傳遞的參數(shù)有三個vm.$set(target,key,value),target不能是Vue.js實(shí)例或者vue.js實(shí)例的根數(shù)據(jù)對象，所謂的根數(shù)據(jù)對象是指vm.$data*

*在使用$delete時候，也可以中另外一種方法實(shí)現(xiàn)，但是不太推薦：

delete;

this.obg._ob_.dep.notify

//手動向依賴發(fā)送變化通知;

(說明：_ob_是vue中是否是響應(yīng)式的判斷依據(jù))*

在使用$delete時候，target不能是Vue.js實(shí)例或者vue.js實(shí)例的根數(shù)據(jù)對象，

數(shù)組的監(jiān)聽

vue通過攔截?cái)?shù)組原型的方式實(shí)現(xiàn)數(shù)組的變化的監(jiān)聽，所以有些不是數(shù)組原型定義的方法進(jìn)行的數(shù)組操作，發(fā)生的變化，是數(shù)組感知不到的，比如通過數(shù)組下標(biāo)修改對應(yīng)位置的值（this.list[0]=2）,或者通過數(shù)組長度改變數(shù)組（比如通過數(shù)組length清空數(shù)組的操作：this.list.length=0）。

所以進(jìn)行數(shù)組操作的時候，盡量使用數(shù)組原型