vuejs组件内的对象属性监听问题

Question

项目使用了vuexcomputed{    data1(){        return this.$store.state.data1    }}发现这个时候data1也确实更新到了预期的值，但是，data1是一个object,里面有的属性被注册了set get例如：data1=｛    a:{...},    b:[...],    c:'abc'｝在使用的时候发现 c被注册了get set(console出来显示的) 变化时dom也同步更新了，但是a,b没有被注册get set，data1更新时没有被同步到dom上，请问什么情况下才能被正确注册上get set ,跟数据类型有关系吗

Answer 1

跟数据类型是有关的。

当你把一个普通的 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响应式原理