Vue响应式原理总结

Vue响应式原理

1. 什么是变化侦测

侦测数据的变化，当数据发生变化时，会通知视图进行相应的更新操作

vue实现变化政策的方案是：数据劫持+发布订阅模式

2. Object的变化侦测

如何追踪变化？

答：Object.defineProperty()

Object.defineProperty()对data中的各个属性进行getter和setter的定义

• 当读取data中属性的值时将调用getter
• 当修改data中属性的值时将调用setter

所以在Vue当中，getter收集依赖，setter触发依赖

收集的依赖在哪？

答：放在Dep中，Dep可以理解为调度中心

Dep是一个封装好的类，用于集中收集依赖，在Dep中维护了一个名为subs的数组用于保存订阅者

• 当getter触发，将依赖存入subs列表中（addSub）
• 当setter触发，将通知依赖进行更新操作（notify）
• 当某个组件被销毁，将依赖移除（removeSub）

依赖是谁？

答：组件实例，即watcher

Vue2.0开始，将粒度调整为中粒度，即一个状态所绑定的依赖不再是具体的DOM节点，而是一个组件

watcher是一个中介角色，数据发生变化时通知它，然后它再通知其他地方

在Vue2.0中，组件和watcher是一一对应的

data中的数据如何变成响应式的？

答：通过walk()+defineReactive()

Vue中封装了一个Observer类，这个类的作用是将一个数据内的所有属性（包括子属性）都转换成getter/setter的形式

具体实现：通过walker遍历对象的属性，调用defineReactive将每一个属性变成getter/setter；如果该属性还是一个对象，则递归该属性

关于Object的问题

1. 对于对象新增的属性，Vue无法侦测，需要使用vm.$set
2. 对于对象属性被删除，Vue无法侦测，需要调用vm.$delete
3. 所以：getter/setter只能追踪一个数据是否被修改，无法追踪新增属性和删除属性

3. Array的变化侦测

引言：Object的变化侦测是靠getter和setter来实现的，但是如果是数组则不一样

拦截器

我们通过Array原型对象中提供的方法来对数组自身内容改变，Vue是侦测不到的，所以我们需要对这些方法进行拦截/重写

这些方法包括：push/pop/unshift/shift/splice/sort/reverse

所以我们通过拦截器去覆盖数组原型的上述方法来追踪变化

对于数组，收集依赖仍然是通过getter，在拦截器中触发依赖

注意：依赖保存的位置必须在getter和拦截器中都可以访问到

关于Array的问题

1. 使用数组索引来更新数组，Vue无法侦测，需要调用set
2. 对数组length的修改（比如length=0清空数组），Vue侦测不到，可以使用splice