一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。
我要一步一步往上爬~大家好，今天我们来一起学习一下vue监测数据的原理
了解监测数据的原理，有什么用？对底层数据改变的了解可以帮助后续更顺利的学习！
可以借助下面这个例子有个更好的理解：
Vue监视范围
vue会监视data中所有层次的数据。
这里的一层数据为name，二层数据有name、age、hobby、frinds等，vue会先加工data，每一组key：value形成getter和setter方法，再通过vm._data=data赋值，就可以做到响应式
如何监测对象中的数据？
具体过程：给new Vue时传入要监测的数据的属性匹配setter方法实现监视 -> 调用setter -> 重新解析模板 -> 生成虚拟DOM -> DOM -> 更新页面
new Vue时创建的属性vue会自动创建getter方法，所以默认有响应式处理，所以对象中后来通过命令形式追加的属性，Vue默认不会做响应式处理- 如果需要给后面添加的属性做响应式处理，就需要使用下面的两种API形式
Vue.set(target，propertyName/index，value)vm.$set(target，propertyName/index，value)·target：给哪个对象添加属性，key：添加什么什么属性，val：属性的具体值
下面例子通过this.$set(this.student,'sex','男')代码，为student对象添加了sex属性，属性值为男，我们只能给data里面的一个对象追加属性，不能给vm的根数据对象data追加属性,更不可以给vm添加属性。
监测数组中的数据变化
如何监测数组中的数据变化，我们要实现数组元素更新
实现通过包裹数组更新元素的方法，本质上就是做了下面两件事情：
- 调用原生的数组对应方法对数组进行元素更新
- 重新解析模板后更新页面
Vue再修改数组中的某个元素时一定会使用如下方法：
API:push()、sort()、pop()、splice()、shift()、unshift()、reverse()Vue.set()、vm.$set()
