脚本宝典收集整理的这篇文章主要介绍了【Vue技巧】利用Proxy自动添加响应式属性,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
初始化Vue实例时,Vue将递归遍历data
对象,通过Object.defineProperty
将其中已有的属性转化为响应式的属性(getter/setter)。响应式属性的变化才能够被Vue观察到。
这就是为什么,Vue文档建议我们在初始化Vue实例之前,提前初始化data
中所有可能用到的属性。如果想要在Vue实例创建以后添加响应式属性,需要使用Vue.set(object, key, value)
,而不能直接通过赋值来添加新属性(这样添加的新属性不具有响应性)。
在运行时才能确定数据属性的键,这称为动态属性。相对地,如果在编程时就能确定属性的键,这称为静态属性。
注意,Vue.set的第一个参数不能是Vue实例或者Vue实例的数据对象,可以是数据对象内嵌套的对象,或者props中的对象。也就是说,不能动态添加根级响应式属性。
Vue文档: Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value)
method.
let vm = new Vue({
data: {
nestedObj: {}
}
}); // 创建Vue实例
Vue.set(vm, 'a', 2); // not works,不能为Vue实例添加根级响应式属性
Vue.set(vm.$data, 'b', 2); // not works,不能为Vue数据对象添加根级响应式属性
Vue.set(vm.nestedObj, 'c', 2); // works,vm.nestedObj是数据对象内的一个嵌套对象
Vue.set(vm.$data.nestedObj, 'd', 2); // works,vm.$data.nestedObj是数据对象内的一个嵌套对象
Vue.set会做适当的检查并报错:set源码。