【轉(zhuǎn)載】VUE 2 無法監(jiān)聽數(shù)組和對象的某些變化

原文:VUE 2 無法監(jiān)聽數(shù)組和對象的某些變化

一、數(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ù)組的變化的


image.png

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ù)組

image.png

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. 對象

image.png

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)下的所有屬性變化,包括新增屬性和刪除屬性

參考鏈接:

  1. https://blog.csdn.net/kkkkk0826/article/details/102680084
  2. https://cn.vuejs.org/v2/guide/reactivity.html
  3. https://www.cnblogs.com/youhong/p/12173354.html
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末牢裳,一起剝皮案震驚了整個(gè)濱河市逢防,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蒲讯,老刑警劉巖忘朝,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異判帮,居然都是意外死亡局嘁,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門脊另,熙熙樓的掌柜王于貴愁眉苦臉地迎上來导狡,“玉大人,你說我怎么就攤上這事偎痛。” “怎么了独郎?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵踩麦,是天一觀的道長枚赡。 經(jīng)常有香客問我,道長谓谦,這世上最難降的妖魔是什么贫橙? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮反粥,結(jié)果婚禮上卢肃,老公的妹妹穿的比我還像新娘。我一直安慰自己才顿,他們只是感情好莫湘,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著郑气,像睡著了一般幅垮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尾组,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天忙芒,我揣著相機(jī)與錄音,去河邊找鬼讳侨。 笑死呵萨,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的跨跨。 我是一名探鬼主播潮峦,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼歹叮!你這毒婦竟也來了跑杭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬榮一對情侶失蹤咆耿,失蹤者是張志新(化名)和其女友劉穎德谅,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體萨螺,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡窄做,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了慰技。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片椭盏。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖吻商,靈堂內(nèi)的尸體忽然破棺而出掏颊,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布乌叶,位于F島的核電站盆偿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏准浴。R本人自食惡果不足惜事扭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望乐横。 院中可真熱鬧求橄,春花似錦、人聲如沸葡公。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽匾南。三九已至啃匿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蛆楞,已是汗流浹背溯乒。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留豹爹,地道東北人裆悄。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像臂聋,于是被迫代替她去往敵國和親光稼。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容