什么是变化侦测
Vue.js会自动通过状态生成DOM,并将其输出到页面上显示出来,这个过程叫渲染。Vue.js的渲染过程是声明式的,我们通过模板来描述状态与DOM之间的映射关系。
通常,在运行时应用内部的状态会不断发生变化,此时需要不停地重新渲染。这时如何确定状态中发生了什么变化?
变化侦测就是用来解决这个问题的,它分为两种类型:一种是“推”(push),另一种是“拉”(pull)。
Angular和React中的变化侦测都属于“拉”,这就是说当状态发生变化时,它不知道哪个状态变了,只知道状态有可能变了,然后会发送一个信号告诉框架,框架内部收到信号后,会进行一个暴力比对来找出哪些DOM节点需要重新渲染。这在Angular中是脏检查的流程,在React中使用的是虚拟DOM。
而Vue.js的变化侦测属于“推”。当状态发生变化时,Vue.js立刻就知道了,而且在一定程度上知道哪些状态变了。因此,它知道的信息更多,也就可以进行更细粒度的更新。
所谓更细粒度的更新,就是说:假如有一个状态绑定着好多个依赖,每个依赖表示一个具体的DOM节点,那么当这个状态发生变化时,向这个状态的所有依赖发送通知,让它们进行DOM更新操作。相比较而言,“拉”的粒度是最粗的。
但是它也有一定的代价,因为粒度越细,每个状态所绑定的依赖就越多,依赖追踪在内存上的开销就会越大。因此,从Vue.js 2.0开始,它引入了虚拟DOM,将粒度调整为中等粒度,即一个状态所绑定的依赖不再是具体的DOM节点,而是一个组件。这样状态变化后,会通知到组件,组件内部再使用虚拟DOM进行比对。这可以大大降低依赖数量,从而降低依赖追踪所消耗的内存。
Vue.js之所以能随意调整粒度,本质上还要归功于变化侦测。因为“推”类型的变化侦测可以随意调整粒度。
如何追踪变化
Object.defineProperty和ES6中的Proxy
Observer
Observer类会附加到每一个被侦测的object上。一旦被附加上,Observer会将object的所有属性转换为getter/setter的形式。来收集属性的依赖,并且当属性发生变化时会通知这些依赖
import Dep from './Dep'; export class Observer { constructor(value) { this.value = value; if (!Array.isArray(value)) { this.walk(value); } } walk(obj) { const keys = Object.keys(obj); for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i], obj[keys[i]]) } } } function defineReactive(data, key, val) { if (typeof val === 'object') { new Observer(val); } let dep = new Dep(); Object.defineProperty(data, key, { enumerable: true, configurable: true, get() { dep.depend();//收集依赖 return val }, set(newVal) { if (val === newVal) { return } val = newVal; dep.notify();//触发依赖 } }) }
Dep
它用来收集依赖、删除依赖和向依赖发送消息等。
import { Watcher } from "./Watcher"; export class Dep { target; //target: ?Watcher; constructor() { this.subs = []; } addSub(sub) { this.subs.push(sub); } removeSub(sub) { remove(this.subs, sub); } depend(){ if(this.target instanceof Watcher){ this.addSub(this.target); } } notify(){ const subs=this.subs.slice(); for (let i = 0; i < subs.length; i++) { subs[i].update(); } } } function remove(arr, item) { if (arr.length) { const index = arr.findIndex(item); if (index > -1) { this.subs.splice(index, 1); } } }
Watcher
Watcher
是一个中介的角色,数据发生变化时通知它,然后它再通知其他地方。
import { Dep } from "./Dep"; export class Watcher { constructor(vm, expOrFn, cb) { this.vm = vm;// vm指当前的Vue实例 this.getter = parsePath(expOrFn); this.cb = cb; this.value = this.get();// 读取vm.$data中的值,同时会触发属性上的getter } get() { // Watcher把自己设置到全局唯一的指定位置,在这里就是Dep.target Dep.target = this; //读取数据,触发这个数据的getter。因此Observer会收集依赖,将这个Watcher收集到Dep,也就是依赖收集。 let value = this.getter.call(this.vm, this.vm); //收集结束,清除Dep.target的内容 Dep.target = null; //返回读取到的数据值 return value } update() { //数据改变之后,Dep会依次循环向依赖发通知,这里接到通知之后,先获取之前的旧数据 const oldValue = this.value; //然后获取最新的值 this.value = this.get(); //将新旧值传给回调函数 this.cb.call(this.vm, this.value, oldValue); } } const bailRE = /[^\w.$]/ export function parsePath(path) { if (bailRE.tetx(path)) { return } const segments = path.split('.') return function (obj) { for (let i = 0; i < segments.length; i++) { if (!obj) { return; } obj = obj[segments[i]] } return obj; } }
总结综述
变化侦测就是侦测数据的变化。当数据发生变化时,要能侦测到并发出通知。
Object
可以通过Object.defineProperty
将属性转换成getter/setter的形式来追踪变化。读取数据时会触发getter,修改数据时会触发setter。
我们需要在getter中收集有哪些依赖使用了数据。当setter被触发时,去通知getter中收集的依赖数据发生了变化。
收集依赖需要为依赖找一个存储依赖的地方,为此我们创建了Dep
,它用来收集依赖、删除依赖和向依赖发送消息等。
所谓的依赖,其实就是Watcher
。只有Watcher
触发的getter才会收集依赖,哪个Watcher
触发了getter,就把哪个Watcher
收集到Dep
中。当数据发生变化时,会循环依赖列表,把所有的Watcher
都通知一遍。
Watcher
的原理是先把自己设置到全局唯一的指定位置(例如window.target
),然后读取数据。因为读取了数据,所以会触发这个数据的getter。接着,在getter中就会从全局唯一的那个位置读取当前正在读取数据的Watcher
,并把这个Watcher
收集到Dep
中去。通过这样的方式,Watcher
可以主动去订阅任意一个数据的变化。
此外,我们创建了Observer
类,它的作用是把一个object
中的所有数据(包括子数据)都转换成响应式的,也就是它会侦测object
中所有数据(包括子数据)的变化。
由于在ES6之前JavaScript并没有提供元编程的能力,所以在对象上新增属性和删除属性都无法被追踪到。
Data、Observer、Dep和Watcher之间的关系
Data
通过Observer
转换成了getter/setter的形式来追踪变化。
当外界通过Watcher
读取数据时,会触发getter从而将Watcher
添加到依赖中。
当数据发生了变化时,会触发setter,从而向Dep
中的依赖(Watcher
)发送通知。
Watcher
接收到通知后,会向外界发送通知,变化通知到外界后可能会触发视图更新,也有可能触发用户的某个回调函数等。
参考资料: