Vue监测对象数据改变的原理

<div id="root"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2>
</div>

const vm = new Vue({el:'#root',data:{name:'尚硅谷',address:'北京',student:{name:'tom',age:{rAge:40,sAge:29,},friends:[{name:'jerry',age:35}]}}
})

在Vue的设计中对对象的数据进行了一个递归，查找对象中的每一个属性，并且对其进行数据代理，给每一个属性设有get和set方法，这样子当对象中的数据发生改变，那么Vue就会察觉并修改页面中的数据

如需给后添加的属性做响应式，请使用如下API:

vm为Vue对象

Vue.set(target, propertyName/index, value)
或
vm.$set(target, propertyName/index, value)

Vue监测数组数据改变的原理

通过包裹数组更新元素的方式实现，本质就是做了两件事：

• 调整原生对应的方法对数组进行更新
• 重新解构模型，进而更新页面

在修改数组的时候，我们只有通过数组的修改方法才能，修改方法有push、pop、shift、unshift、splice、sort、reverse

注意：Vue.set()和vm.set() 不能给vm或者vm的根数据对象添加属性

<div id="root"><button @click="addFriend">在列表首位添加一个朋友</button> <br/><button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/><button @click="addHobby">添加一个爱好</button> <br/><h3>爱好：</h3><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h3>朋友们：</h3><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul>
</div>

const vm = new Vue({el:'#root',data:{student:{hobby:['抽烟','喝酒','烫头'],friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addFriend(){this.student.friends.unshift({name:'jack',age:70})},updateFirstFriendName(){this.student.friends[0].name = '张三'},addHobby(){this.student.hobby.push('学习')},}
})

---

参考：
Vue 监测数据改变的原理