一、數(shù)組
1. 不能監(jiān)聽的情況
(1) 直接通過下標(biāo)賦值 arr[i] = value
(2) 直接修改數(shù)組長度 arr.length = newLen
2. 替代做法
(1)修改值
1. Vue.set(arr, index, newvalue)
2. vm.$set(arr, index, newvalue)
3. arr.splice(index, 1, newvalue)
(2) 修改數(shù)組長度的止,
arr.splice(newLen)
3. 注意
調(diào)用數(shù)組的pop瘟芝、push啊鸭、shift似舵、unshift、splice、sort勾给、reverse等方法時(shí)是可以監(jiān)聽到數(shù)組的變化的
vue內(nèi)部相當(dāng)于重寫了數(shù)組的原型,劫持了這七個(gè)方法
二锅知、對象
1. 不能監(jiān)聽的情況
屬性的新增和刪除
obj.newkey=newvalue
delete obj.key
2. 替代做法
// 新增
1. Vue.set(obj, newkey, newvalue)
2. vm.$set(obj, newkey, newvalue)
3. obj = Object.assign({}, obj, {newkey1: newvalue1, newkey2: newvalue2})
// 刪除
1. Vue.delete(obj, key)
2. vm.$delete(obj, key)
三播急、分析 vue 2 無法監(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)這個(gè)功能桩警,因?yàn)閿?shù)組長度不定而且數(shù)據(jù)可能會(huì)很多,如果對每一個(gè)數(shù)據(jù)都實(shí)現(xiàn)監(jiān)聽昌妹,性能代價(jià)太大
但是注意:數(shù)組中的元素是引用類型時(shí)是會(huì)被監(jiān)聽的
2. 對象
Object.defineProperty()針對的是對象的某個(gè)屬性捶枢,而且這個(gè)操作在vue的初始化階段就完成了,所以新增的屬性無法監(jiān)聽飞崖,通過set方法新增對象就相當(dāng)于初始化階段的數(shù)據(jù)響應(yīng)式處理
四烂叔、 vue 3響應(yīng)式原理
vue 3是通過proxy直接代理整個(gè)對象來實(shí)現(xiàn)的,而不是像Object.defineProperty針對某個(gè)屬性固歪。所以蒜鸡,只需做一層代理就可以監(jiān)聽同級(jí)結(jié)構(gòu)下的所有屬性變化,包括新增屬性和刪除屬性
參考鏈接: