1 回答

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ù)組然后重新賦值也是可以的
添加回答
舉報(bào)