前期没有的数据变量,想在后期添加并且使其跟其他变量一样都是响应式的,也就是说:跟其他变量一样存在set和get方法,可以使用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()方法劫持,完成相关操作后,会重新解析模板