跟數據類型是有關的。

當你把一個普通的 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 组件属性监听_vuejs组件内的对象属性监听问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。