vue修改对象某个属性_Vue为啥在方法中添加对象某个属性时不能修改

如下代码

{{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的的值也都会更新一次。