Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題
一、數(shù)組
1. 不能監(jiān)聽的情況
(1) 直接通過下標賦值 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)部相當于重寫了數(shù)組的原型,劫持了這七個方法
二、對象
1. 不能監(jiān)聽的情況
屬性的新增和刪除
obj.newkey=newvalue delete obj.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)
三、分析 vue 2 無法監(jiān)聽數(shù)組和對象的這些變化的原因
首先,vue2是通過Object.defineProperty(obj, key, value)這種方式監(jiān)聽數(shù)據(jù)的
1. 對于數(shù)組
Object.defineProperty()是可以對數(shù)組實現(xiàn)監(jiān)聽操作的,但是vue并沒有實現(xiàn)這個功能,因為數(shù)組長度不定而且數(shù)據(jù)可能會很多,如果對每一個數(shù)據(jù)都實現(xiàn)監(jiān)聽,性能代價太大
但是注意:數(shù)組中的元素是引用類型時是會被監(jiān)聽的
2. 對象
Object.defineProperty()針對的是對象的某個屬性,而且這個操作在vue的初始化階段就完成了,所以新增的屬性無法監(jiān)聽,通過set方法新增對象就相當于初始化階段的數(shù)據(jù)響應(yīng)式處理
四、vue 3響應(yīng)式原理
vue 3是通過proxy直接代理整個對象來實現(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實例或者vue.js實例的根數(shù)據(jù)對象,所謂的根數(shù)據(jù)對象是指vm.$data *
*在使用$delete時候,也可以中另外一種方法實現(xiàn),但是不太推薦:
?delete this.obj.name; ?this.obg._ob_.dep.notify ?//手動向依賴發(fā)送變化通知;
(說明: _ob_ 是 vue中是否是響應(yīng)式的判斷依據(jù))*
在使用$delete時候,target不能是Vue.js實例或者vue.js實例的根數(shù)據(jù)對象,
數(shù)組的監(jiān)聽
vue通過攔截數(shù)組原型的方式實現(xiàn)數(shù)組的變化的監(jiān)聽,所以有些不是數(shù)組原型定義的方法進行的數(shù)組操作,發(fā)生的變化,是數(shù)組感知不到的,比如通過數(shù)組下標修改對應(yīng)位置的值(this.list[0] = 2),或者通過數(shù)組長度改變數(shù)組(比如通過數(shù)組length清空數(shù)組的操作: this.list.length = 0 )。
所以進行數(shù)組操作的時候,盡量使用數(shù)組原型方法操作:
push pop unshift shift concat reverse sort slice splice join?
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue keep-alive請求數(shù)據(jù)的方法示例
本篇文章主要介紹了vue keep-alive請求數(shù)據(jù)的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05