vue响应式原理
vue是一个轻量级、数据驱动的渐进式框架，其核心就是数据驱动。一直以来，对vue响应式原理的理解还是停留在利用Object.defineProperty中的get和set进行数据劫持，至于内部是如何运转的，并没有一个全面的认知。本文就简要概述下，vue响应式原理具体的实现。
就一般而言，props、data、computed、watch四个模块构建成vue数据处理系统的骨架，绝大部分的数据声明、转换、传递，都是通过这几个模块进行。盗用vue.js官网的一张图，vue的数据流如下图所示：
在说数据流之前，我们先明确一点，Object.defineProperty(obj, prop, descriptor)主要作用是声明对象的属性，obj是对象名称,prop是对象的键值，descriptor是属性的数据描述符和存取描述符，其中属性的存取描述符就是上图中的getter/setter，getter触发条件是取，setter的触发条件是存。如下述代码，
let o ={} let bValue; Object.defineProperty(o, "b", { get : function(){ console.log('执行了取操作') return bValue; }, set : function(newValue){ console.log('执行了存操作') bValue = newValue; }, enumerable : true, configurable : true }); o.b = 1; // 存 console.log(o.b) // 取 console.log(bValue) // o.b === bValue
在vue中，声明响应式属性用的方法和上述大致类似，只是中间加了许多业务处理逻辑。先简要概述下vue数据流，主要分为以下两步：
1、通过getter收集依赖
什么是依赖？依赖可以理解为一个观察者对象，里面包含数据必须的属性（比如属性作用域对象）、方法（比如watch的回调）、字符串表达式（比如渲染函数）等，简单来说，观察者对象Watcher的主要作用就是数据与视图的粘合剂，通过发布-订阅模式，响应式的进行视图渲染。
为什么在getter中能够收集到依赖信息呢？首先，视图要想渲染数据，肯定要有对数据的取操作，取值时，会触发对数据的取操作，此时，可以将依赖的数据信息添加到属性的订阅者列表中，这样后续数据如果有变化，就可以从数据的订阅者列表中，依次执行对应的处理逻辑。
2、通过setter派发更新
setter是承接getter的作用的。在第一次数据渲染时，会通过getter，收集到属性的所有订阅者信息，在给属性赋值时，会触发属性的setter方法，在setter里，会遍历订阅者列表，根据订阅者的表达式，回调，处理对应的逻辑方法，实现数据的响应式更新。setter在响应式系统中，更多的可能是承接一个启后的角色。
在vue.js中，进行响应式数据声明的代码如下所示：
export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean ) { // 初始化一个发布-订阅模型，每个对象都包含一个dep实例 const dep = new Dep() // 获取属性描述符 const property = Object.getOwnPropertyDescriptor(obj, key) // 对象的属性应该是可扩展、可配置的 if (property && property.configurable === false) { return } // cater for pre-defined getter/setters const getter = property && property.get const setter = property && property.set // 处理obj的值 if ((!getter || setter) && arguments.length === 2) { val = obj[key] } // 如果val值存在Object，则需要侦听val值的变化 let childOb = !shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val // 每次取值时，如果存在依赖的target对象，将watcher对象添加到订阅列表中，当数据发生改变时，通知watcher进行更新 if (Dep.target) { // 将watcher加入到订阅列表 dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, set: function reactiveSetter (newVal) { // 派发更新 // 获取到value数据 const value = getter ? getter.call(obj) : val /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if (process.env.NODE_ENV !== 'production' && customSetter) { customSetter() } // #7981: for accessor properties without setter if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal } // 重新更新下数据依赖 childOb = !shallow && observe(newVal) // 通知数据更新 dep.notify() } }) }
上述代码量比较多，以defineReactive方法响应式声明属性为中心，往前往后，分析下整个依赖收集与派发更新的过程。在开始之前，可以参考【vue实例化过程】，来熟悉下vue实例化的大致流程。
1、依赖收集
依赖收集中，需要重点关注的是dep.depend方法，在说dep.depend之前，需要关注上面有个判断条件，Dep.target，只有存在Dep.target时，才能将观察者对象添加到订阅列表中。以实例化Vue为例，在实例化组件时，会实例化一个watcher，watcher中包含组件挂载的相关信息。其中比较重要的一环就是会调用Watcher的get方法，get方法具体执行逻辑如下：
get () { // 设置当前处理的Watcher pushTarget(this) let value const vm = this.vm try { value = this.getter.call(vm, vm) } catch (e) { if (this.user) { handleError(e, vm, `getter for watcher "${this.expression}"`) } else { throw e } } finally { // "touch" every property so they are all tracked as // dependencies for deep watching // 深度监听 if (this.deep) { traverse(value) } popTarget() this.cleanupDeps() } return value }
其中，this.getter是指Watcher的一个表达式，在组件挂载中是指方法mountComponent，此方法主要作用是根据render函数生成vnode，根据vnode转换成真实的DOM节点；在watch中，this.getter是指根据属性名获取属性值的一个方法。在代码的第一句，有个pushTarget操作，这一步就是为后面get的依赖收集服务的，是将当前的Watcher实例，挂载到Dep上，表明当前正在处理的Watcher，在this.getter中，往往会伴随着对数据的取操作。在getter调用完毕后，会有一个popTarget,执行完当前的Watcher后，会清除对当前Watcher的依赖，pushTarget/popTarget的实现过程如下所示，在一个时间点，只能有一个被执行的Watcher：
// The current target watcher being evaluated. // This is globally unique because only one watcher // can be evaluated at a time. Dep.target = null const targetStack = [] // 进栈 export function pushTarget (target: ?Watcher) { targetStack.push(target) Dep.target = target } // 出栈 export function popTarget () { targetStack.pop() Dep.target = targetStack[targetStack.length - 1] }
2、派发更新
在我们对响应式数据更改时，会执行属性声明时的set方法，在set方法里，有一个dep.notify操作，主要就是遍历执行属性的订阅者列表Watcher的update方法，dep.notify执行的方法如下：
notify () { // stabilize the subscriber list first const subs = this.subs.slice() if (process.env.NODE_ENV !== 'production' && !config.async) { // subs aren't sorted in scheduler if not running async // we need to sort them now to make sure they fire in correct // order subs.sort((a, b) => a.id - b.id) } for (let i = 0, l = subs.length; i < l; i++) { // 执行订阅对象批量更新？？？@todo // 每个subs都有update方法 subs[i].update() } }
更新执行操作比较多，但是需要注意的点是，视图和响应式回调更新的时机，当我们改变数据时，直接获取DOM中绑定的数据，可能还是原先的数据，视图并没有随之更新。如果想要在数据渲染完成后再进行回调处理，通常使用this.$nextTick。在派发更新时，会调用nextTick方法，传入更新数据的回调，nextTick在一般情况下是一个微任务，在支持promise的浏览器中是在promise中处理回调。我们都知道，在浏览器中，代码一般的执行顺序是 同步任务>微任务>宏任务。微任务常用的就是promise.then,宏任务常用的setTimeout。所以，捕获视图更新的回调，一般在setTimeout里也是可行的。微任务、宏任务与同步任务的处理流程可以参考下面代码：
console.log('开始执行测试代码')
let p = Promise.resolve()
p.then(function () {
console.log('执行了微任务')
})
setTimeout(function () {
console.log('执行了宏任务')
})
console.log('执行结束')
代码的执行顺序如下图所示：
派发更新操作，到最后都会执行到Watcher的run方法，最终都会执行到Watcher的getter，继续走页面的渲染流程。其实vue响应式原理核心就是利用Object.defineProperty进行数据劫持，对引用的数据进行依赖收集，数据改变时在进行派发更新消息。Watcher中存储的是数据依赖更新的消息。
附Watcher.js中代码：
export default class Watcher { vm: Component; expression: string; cb: Function; id: number; deep: boolean; user: boolean; lazy: boolean; sync: boolean; dirty: boolean; active: boolean; deps: Array<Dep>; newDeps: Array<Dep>; depIds: SimpleSet; newDepIds: SimpleSet; before: ?Function; getter: Function; value: any; constructor ( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean ) { debugger this.vm = vm // 渲染组件的watcher，通常computed 和 watch 也会实例化watcher if (isRenderWatcher) { vm._watcher = this } // 组件上的watcher队列 vm._watchers.push(this) // options if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = !!options.lazy this.sync = !!options.sync this.before = options.before } else { this.deep = this.user = this.lazy = this.sync = false } this.cb = cb this.id = ++uid // uid for batching this.active = true this.dirty = this.lazy // for lazy watchers this.deps = [] this.newDeps = [] this.depIds = new Set() this.newDepIds = new Set() // updateComponents, watch, computed callback function this.expression = process.env.NODE_ENV !== 'production' ? expOrFn.toString() : '' // parse expression for getter // expression是function的情况：computed，mountComponent if (typeof expOrFn === 'function') { this.getter = expOrFn } else { // watch走这个分支，watch传入的expression是字符串 // 将字符串按照.进行字符串分割解析，exp: 'a.b.c' 获取到具体对象的值 this.getter = parsePath(expOrFn) if (!this.getter) { this.getter = noop process.env.NODE_ENV !== 'production' && warn( `Failed watching path: "${expOrFn}" ` + 'Watcher only accepts simple dot-delimited paths. ' + 'For full control, use a function instead.', vm ) } } this.value = this.lazy ? undefined : this.get() } /** * Evaluate the getter, and re-collect dependencies. * 执行更新组件的方法，先将当前要执行的watcher推入到执行队列 */ get () { // 设置当前处理的Watcher pushTarget(this) let value const vm = this.vm try { value = this.getter.call(vm, vm) } catch (e) { if (this.user) { handleError(e, vm, `getter for watcher "${this.expression}"`) } else { throw e } } finally { // "touch" every property so they are all tracked as // dependencies for deep watching // 深度监听 if (this.deep) { traverse(value) } popTarget() this.cleanupDeps() } return value } /** * Add a dependency to this directive. * 添加依赖 */ addDep (dep: Dep) { const id = dep.id // 防止数据的重复订阅 if (!this.newDepIds.has(id)) { this.newDepIds.add(id) this.newDeps.push(dep) if (!this.depIds.has(id)) { dep.addSub(this) } } } /** * Clean up for dependency collection. */ cleanupDeps () { let i = this.deps.length while (i--) { const dep = this.deps[i] if (!this.newDepIds.has(dep.id)) { dep.removeSub(this) } } let tmp = this.depIds this.depIds = this.newDepIds this.newDepIds = tmp this.newDepIds.clear() tmp = this.deps this.deps = this.newDeps this.newDeps = tmp this.newDeps.length = 0 } /** * Subscriber interface. * Will be called when a dependency changes. * 依赖改变，会触发watcher的update方法 */ update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) } } /** * Scheduler job interface. * Will be called by the scheduler. */ run () { if (this.active) { const value = this.get() if ( value !== this.value || // Deep watchers and watchers on Object/Arrays should fire even // when the value is the same, because the value may // have mutated. isObject(value) || this.deep ) { // set new value const oldValue = this.value this.value = value if (this.user) { try { this.cb.call(this.vm, value, oldValue) } catch (e) { handleError(e, this.vm, `callback for watcher "${this.expression}"`) } } else { this.cb.call(this.vm, value, oldValue) } } } } /** * Evaluate the value of the watcher. * This only gets called for lazy watchers. */ evaluate () { this.value = this.get() this.dirty = false } /** * Depend on all deps collected by this watcher. */ depend () { let i = this.deps.length while (i--) { this.deps[i].depend() } } /** * Remove self from all dependencies' subscriber list. * 移除事件订阅 */ teardown () { if (this.active) { // remove self from vm's watcher list // this is a somewhat expensive operation so we skip it // if the vm is being destroyed. if (!this.vm._isBeingDestroyed) { remove(this.vm._watchers, this) } let i = this.deps.length while (i--) { this.deps[i].removeSub(this) } this.active = false } } }
