如下代码
{{people.name}}
{{people.age}}
{{people}}
{{name}}
w423
var vm = new Vue({
el: '#app',
data: {
people: {
name: '111',
age: 12,
},
name: '123'
},
methods: {
addProperty(key,value) {
this.people[key] = value
// this.name =213---------(1)
}
},
})
在上述代码(1)关键处,如果将这行代码注释了,点击页面按钮,方法会执行(测试用过console.log会执行),但是页面以及vue-devtools中people对象中属性值没有任何变化。
但是当(1)注释取消,添加了this.name = 213修改,就会触发页面people属性和vue-devtools的对象属性的添加。请问这是什么原因
回答
vue响应式,也就是vue数据驱动页面变化的原理,在data中定义的属性会被增加 set 和get方法,当值变化是会触发set方法,从而达到监听数据变化的效果,有关set可以百度下defineProperty()。
手动添加属性并不会被监听,如果希望数据更新,使用this.$set(this.people,key,value);
注释掉的内容从新放开,应为name在data中定义了,people内部发生变化被监听到,people的的值也都会更新一次。