跟數據類型是有關的。
當你把一個普通的 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)
當然,構造新的對象/數組然后重新賦值也是可以的