{ { value }}
<button @click=“addProperty”>动态添加新属性
点击按钮,发现结果不及预期,数据虽然更新了(console打印出了新属性),但页面并没有更新
二、原理分析
下面来分析一下
vue2是用过Object.defineProperty实现数据响应式
const item = {}
Object.defineProperty(obj, ‘oldProperty’, {
get() {
console.log(get oldProperty:${val}
);
return val
},
set(newVal) {
if (newVal !== val) {
console.log(set oldProperty:${newVal}
);
val = newVal
}
}
})
}
原因:组件初始化时,对data中的item进行递归遍历,对item的每一个属性进行劫持,添加set,get方法。我们后来新加的newProperty属性,并没有通过Object.defineProperty设置成响应式数据,修改后不会视图更新。
三、解决方案
Vue 不允许在已经创建的实例上动态添加新的响应式属性