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

Question

如下代码

<div id="app">

 <input type="text" v-model="people.name">

 <p>{{people.name}}</p>

 <p>{{people.age}}</p>

 <p>{{people}}</p>

 <p>{{name}}</p>

 <button @click = 'addProperty("qwe","asd")'>w423</button>

 </div>

 <script>

 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）

 }

 },

 })

 </script>

在上述代码（1）关键处，如果将这行代码注释了，点击页面按钮，方法会执行（测试用过console.log会执行），但是页面以及vue-devtools中people对象中属性值没有任何变化。

但是当（1）注释取消，添加了this.name = 213修改，就会触发页面people属性和vue-devtools的对象属性的添加。请问这是什么原因

Answer 1

vue响应式，也就是vue数据驱动页面变化的原理，在data中定义的属性会被增加 set 和get方法，当值变化是会触发set方法，从而达到监听数据变化的效果，有关set可以百度下defineProperty()。
手动添加属性并不会被监听，如果希望数据更新，使用this.$set(this.people,key,value);
注释掉的内容从新放开，应为name在data中定义了，people内部发生变化被监听到，people的的值也都会更新一次。