Vue模拟监测数据/监测数据原理(含对象数据和数组数据

1.Vue模拟监测数据(数据代理的原生代码

Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第1张图片Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第2张图片

以上只是模拟核心内容,Vue中还有更加完善,比如无限递归像内层寻找对象,并附带getter/setter 

2.Vue.set()方法(增加一个对象中响应式属性数据

即实时显示在页面(也是vm.$set

Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第3张图片

Tip:根数据对象指的是vm._date/Vue.date/vm,都不能直接作为Vue.set的第一个参数

例操作

例操作

也可写成vm.student(因为存在数据代理 

3.Vue监测数组的数据原理

能造成响应式的操作:

Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第4张图片

操作原理解释:Vue中的操作push不再只是普通数组的添加,而是在此基础上增加了响应式到页面的操作

 

a.无响应式更改:

b.有响应式更改

Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第5张图片

监测数据总结(含对象/数组 

Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第6张图片

各种操作 

dom页面模板中

Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第7张图片Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第8张图片

 Vue实例操作中:

​​​​​​​Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第9张图片

Vue模拟监测数据/监测数据原理(含对象数据和数组数据_第10张图片

总结:这种感觉我从未有。Cause I got a crush on you who you

你可能感兴趣的:(vue.js)