vue实现数据监测（响应式）

前期没有的数据变量，想在后期添加并且使其跟其他变量一样都是响应式的，也就是说：跟其他变量一样存在set和get方法，可以使用Vue.set或vm.$set实现。

响应式：修改元素的值，页面会重新更新显示新的数据；

一、Vue.set和vm.$set

用法：

（1）用于实现后期在页面添加一个响应式的数据；

（2）接收三个参数：目标对象target，添加元素的key，添加元素的value；

（3）注意：目标对象不能是vm或vm._data，只能给_data中的对象添加；

例：vm.$set(vm.student,"sex","男"); //给vm下的一个student对象添加一个属性sex，值为男

二、监测对象数据

原理步骤：

（1）首先是加工data：将new vue中data对象的元素都添加set和get方法；

（2）然后实现vm._data=data：将加工后的data赋给_data；

三、监测数组的改变

1、与监测对象数据不同，vue没有为数组配置对应的get和set方法，当通过数组下标[0]去修改数组里面的元素时，无法响应式显示修改后的数据（本质上是已经完成修改了，但是vue无法监测到）；

2、只能监测push、shift、unshift、pop、reverse等数组函数，不能监测下标调用的方式；

原理：数组函数不再是数组Array的原始函数，而是vue为我们定义的新的函数，它除了调用原始函数之外，还进行了解析模板、生成虚拟DOM等操作，所以就能够实现响应式；

3、还可以使用Vue.set()和vm.$set()方法进行操作

例：Vue.set(vm._data.hobby,1,'打篮球') //将hobby数组的第二个元素改为‘打篮球’；

数据成功修改了，但是页面不会更新数据

数据劫持：

当调用或者修改_data中的数据时，会先被get()和set()方法劫持，完成相关操作后，会重新解析模板