已解決430363個問題，去搜搜看，總會有你想問的

vuejs組件內的對象屬性監聽問題

首頁猿問 vuejs組件內的對象屬性監聽問題

vuejs組件內的對象屬性監聽問題

JavaScript

胡子哥哥 2019-02-09 08:39:23

項目使用了vuexcomputed{ data1(){ return this.$store.state.data1 }}發現這個時候data1也確實更新到了預期的值，但是，data1是一個object,里面有的屬性被注冊了set get例如：data1=｛ a:{...}, b:[...], c:'abc'｝在使用的時候發現 c被注冊了get set(console出來顯示的) 變化時dom也同步更新了，但是a,b沒有被注冊get set，data1更新時沒有被同步到dom上，請問什么情況下才能被正確注冊上get set ,跟數據類型有關系嗎

查看完整描述

1 回答

Qyouu

TA貢獻1786條經驗獲得超11個贊

跟數據類型是有關的。

當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。

但是不是所有的變動都可以通過set/get捕捉到，比如一個數組

let a = [1, 2, 3]

a[0] = 2 // 這個就是沒法通過set/get捕捉到的變動，所以不能觸發vue的響應式更新

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

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

又比如一個對象

let a = {

name : 'gg'

}

a.name = 'ok' // 會觸發dom更新

a.age = 18 //不會觸發dom更新，因為在vue‘改造’a對象的時候，不存在age屬性，顯然沒辦法給它添加getter/setter

因此當你對數組進行操作時，可以使用vue提供的8個數組變異方法來保證觸發響應式更新：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

當你需要給一個對象添加屬性時，使用 Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2)

當然，構造新的對象/數組然后重新賦值也是可以的

深入Vue響應式原理

反對回復 2019-02-13

1 回答
0 關注
402 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

vuejs組件內的對象屬性監聽問題

vuejs組件內的對象屬性監聽問題

1 回答

添加回答