跟数据类型是有关的。
当你把一个普通的 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)
当然,构造新的对象/数组然后重新赋值也是可以的