项目使用了vuex
computed{
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 ,跟数据类型有关系吗
跟数据类型是有关的。
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
但是不是所有的变动都可以通过set/get捕捉到,比如一个数组
又比如一个对象
因此当你对数组进行操作时,可以使用vue提供的8个数组变异方法来保证触发响应式更新:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
当你需要给一个对象添加属性时,使用 Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2)
当然,构造新的对象/数组然后重新赋值也是可以的
深入Vue响应式原理