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

當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 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è)對(duì)象

let a = {

name : 'gg'

}

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

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

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

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

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

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

總結(jié)

以上是生活随笔為你收集整理的vue 组件属性监听_vuejs组件内的对象属性监听问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。