第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

vuejs組件內(nèi)的對象屬性監(jiān)聽問題

vuejs組件內(nèi)的對象屬性監(jiān)聽問題

胡子哥哥 2019-02-09 08:39:23
項(xiàng)目使用了vuexcomputed{    data1(){        return this.$store.state.data1    }}發(fā)現(xiàn)這個(gè)時(shí)候data1也確實(shí)更新到了預(yù)期的值,但是,data1是一個(gè)object,里面有的屬性被注冊了set get例如:data1={    a:{...},    b:[...],    c:'abc'}在使用的時(shí)候發(fā)現(xiàn) c被注冊了get set(console出來顯示的) 變化時(shí)dom也同步更新了,但是a,b沒有被注冊get set,data1更新時(shí)沒有被同步到dom上,請問什么情況下才能被正確注冊上get set ,跟數(shù)據(jù)類型有關(guān)系嗎
查看完整描述

1 回答

?
Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

跟數(shù)據(jù)類型是有關(guān)的。

當(dāng)你把一個(gè)普通的 JavaScript 對象傳給 Vue 實(shí)例的 data 選項(xiàng),Vue 將遍歷此對象所有的屬性,并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。

但是不是所有的變動(dòng)都可以通過set/get捕捉到,比如一個(gè)數(shù)組


let a = [1, 2, 3] 

a[0] = 2 // 這個(gè)就是沒法通過set/get捕捉到的變動(dòng),所以不能觸發(fā)vue的響應(yīng)式更新

this.$set(a, 0 ,2) //這樣就可以

a.splice(0, 1, 2) //這樣也可以

又比如一個(gè)對象


let a = {

    name : 'gg'

}

a.name = 'ok' // 會(huì)觸發(fā)dom更新

a.age = 18 //不會(huì)觸發(fā)dom更新,因?yàn)樵趘ue‘改造’a對象的時(shí)候,不存在age屬性,顯然沒辦法給它添加getter/setter

因此當(dāng)你對數(shù)組進(jìn)行操作時(shí),可以使用vue提供的8個(gè)數(shù)組變異方法來保證觸發(fā)響應(yīng)式更新:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()


當(dāng)你需要給一個(gè)對象添加屬性時(shí),使用 Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2)


當(dāng)然,構(gòu)造新的對象/數(shù)組然后重新賦值也是可以的

深入Vue響應(yīng)式原理


查看完整回答
反對 回復(fù) 2019-02-13
  • 1 回答
  • 0 關(guān)注
  • 401 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)