Vue监视数据的原理:
1.Vue会监视data中所有层次的数据。
2.Vue如何检测对象中的数据?
通过setter实现监视,且要在new Vue时就传入要检测的数据。
(1)给对象中的后面追加属性,Vue默认组做响应式处理
(2)如需要添加响应式属性,请使用如下API:
Vue.set(target,propertyName/数组index,value)
vm.$set(target,propertyName/数组index,value)
Tip:
Vue.set给对象追加一个响应式的数据,不可以直接给data追加属性,只能给data内部的对象追加属性。数组方便记,可以将它看做类数组,本质是一个对象。像0、1为属性key,其值为value,因此该方法写index索引值,就相当于写属性名
3.Vue如何检测数组中的数据?
通过包裹(重写)数组更新的方法来实现的,本质其实做了两件事:
(1)调用原生对应的方法对数组进行更新。
(2)重新解析模板,进而更新页面
4.在Vue中修改数组中的某个元素一定使用如下方法:
-
使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Tip:
例如filter()
、concat()
和slice()
。它们不会变更原始数组,而总是返回一个新数组。[来自Vue官网] -
Vue.set()或者vm.$set()
Tip:
Vue.set()和vm.$set()不能给vm或者vm的根对象数据(vm._data)添加属性!!!
5.数据劫持
给原来的data添加对应的getter、setter,使之变成响应式数据的操作称为数据劫持。数据劫持,即有人修改数据会被setter监听到,即为劫持。劫持到了之后会更改数据,并重新解析模板
例如:Vue中的data到vm._data的过程