写在前面
Vue.js是一款MVVM框架，核心思想是数据驱动视图，数据模型仅仅是普通的 JavaScript 对象。而当修改它们时，视图会进行更新。实现这些的核心就是“ 响应式系统”。 我们在开发过程中可能会存在这样的疑问：
- Vue.js把哪些对象变成了响应式对象？
- Vue.js究竟是如何响应式修改数据的？
- 上面这幅图的下半部分是怎样一个运行流程？
- 为什么数据有时是延时的（即什么情况下要用到nextTick）？
实现一个简易版的响应式系统
响应式系统核心的代码定义在src/core/observer中：
这部分的代码是非常多的，为了让大家对响应式系统先有一个印象，我在这里先实现一个简易版的响应式系统，麻雀虽小五脏俱全，可以结合开头那张图的下半部分来分析，写上注释方便大家理解。 /** * Dep是数据和Watcher之间的桥梁，主要实现了以下两个功能： * 1.用 addSub 方法可以在目前的 Dep 对象中增加一个 Watcher 的订阅操作； * 2.用 notify 方法通知目前 Dep 对象的 subs 中的所有 Watcher 对象触发更新操作。 */ class Dep { constructor () { // 用来存放Watcher对象的数组 this.subs = []; } addSub (sub) { // 往subs中添加Watcher对象 this.subs.push(sub); } // 通知所有Watcher对象更新视图 notify () { this.subs.forEach((sub) => { sub.update(); }) } } // 观察者对象 class Watcher { constructor () { // Dep.target表示当前全局正在计算的Watcher（当前的Watcher对象），在get中会用到 Dep.target = this; } // 更新视图 update () { console.log("视图更新啦"); } } Dep.target = null; class Vue { // Vue构造类 constructor(options) { this._data = options.data; this.observer(this._data); // 实例化Watcher观察者对象，这时候Dep.target会指向这个Watcher对象 new Watcher(); console.log('render', this._data.message); } // 对Object.defineProperty进行封装，给对象动态添加setter和getter defineReactive (obj, key, val) { const dep = new Dep(); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { // 往dep中添加Dep.target（当前正在进行的Watcher对象） dep.addSub(Dep.target); return val; }, set: function reactiveSetter (newVal) { if (newVal === val) return; // 在set的时候通知dep的notify方法来通知所有的Wacther对象更新视图 dep.notify(); } }); } // 对传进来的对象进行遍历执行defineReactive observer (value) { if (!value || (typeof value !== 'object')) { return; } Object.keys(value).forEach((key) => { this.defineReactive(value, key, value[key]); }); } } let obj = new Vue({ el: "#app", data: { message: 'test' } }) obj._data.message = 'update' 执行以上代码，打印出来的信息为：
render test 视图更新啦 下面结合Vue.js源码来分析它的流程：
Object.defineProperty()
我们都知道响应式的核心是利用来ES5的Object.defineProperty()方法，这也是Vue.js不支持IE9一下的原因，而且现在也没有什么好的补丁来修复这个问题。具体的可以参考MDN文档。这是它的使用方法：
/* obj: 目标对象 prop: 需要操作的目标对象的属性名 descriptor: 描述符 return value 传入对象 */ Object.defineProperty(obj, prop, descriptor) 其中descriptor有两个非常核心的属性：get和set。在我们访问一个属性的时候会触发getter方法，当我们对一个属性做修改的时候会触发setter方法。当一个对象拥有来getter方法和setter方法，我们可以称这个对象为响应式对象。
从new Vue()开始
Vue实际上是一个用Function实现的类，定义在src/core/instance/index.js中：
当用new关键字来实例化Vue时，会执行_init方法，定义在src/core/instance/init.js中，关键代码如下图： 
在这当中调用来initState()方法，我们来看一下initState()方法干了什么，定义在src/core/instance/state.js中，关键代码如下图： 
可以看出来，initState方法主要是对props，methods，data，computed和watcher等属性做了初始化操作。在这当中调用来initData方法，来看一下initData方法干了什么，定义在src/core/instance/state.js，关键代码如下图： 
其实这段代码主要做了两件事，一是将_data上面的数据代理到vm上，另一件是通过observe将所有数据变成observable。值得注意的是data中key不能和props和methods中的key冲突，否则会产生warning。 Observer
接下来看Observer的定义，在/src/core/observer/index.js中：
/** * Observer class that is attached to each observed * object. Once attached, the observer converts the target * object's property keys into getter/setters that * collect dependencies and dispatch updates. */ export class Observer { value: any; dep: Dep; vmCount: number; // number of vms that has this object as root $data constructor (value: any) { this.value = value this.dep = new Dep() this.vmCount = 0 def(value, '__ob__', this) if (Array.isArray(value)) { const augment = hasProto ? protoAugment : copyAugment augment(value, arrayMethods, arrayKeys) this.observeArray(value) } else { this.walk(value) } } /** * Walk through each property and convert them into * getter/setters. This method should only be called when * value type is Object. */ walk (obj: Object) { const keys = Object.keys(obj) for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i]) } } /** * Observe a list of Array items. */ observeArray (items: Array<any>) { for (let i = 0, l = items.length; i < l; i++) { observe(items[i]) } } } 注意看英文注释，尤大把晦涩难懂的地方都已经用英文注释写出来。Observer它的作用就是给对象的属性添加getter和setter，用来依赖收集和派发更新。walk方法就是把传进来的对象的属性遍历进行defineReactive绑定，observeArray方法就是把传进来的数组遍历进行observe。
defineReactive
接下来看一下defineReative方法，定义在src/core/observer/index.js中：
let childOb = !shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, set: function reactiveSetter (newVal) { 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() } if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = !shallow && observe(newVal) dep.notify() } }) 对象的子对象递归进行observe并返回子节点的Observer对象：
childOb = !shallow && observe(val) 如果存在当前的Watcher对象，对其进行依赖收集，并对其子对象进行依赖收集，如果是数组，则对数组进行依赖收集，如果数组的子成员还是数组，则对其遍历：
if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } 执行set方法的时候，新的值需要observe，保证新的值是响应式的：
childOb = !shallow && observe(newVal) dep对象会执行notify方法通知所有的Watcher观察者对象：
dep.notify() Dep
Dep是Watcher和数据之间的桥梁，Dep.target表示全局正在计算的Watcher。来看一下依赖收集器Dep的定义，在/src/core/observer/dep.js中： export default class Dep { static target: ?Watcher; id: number; subs: Array<Watcher>; constructor () { this.id = uid++ this.subs = [] } // 添加一个观察者 addSub (sub: Watcher) { this.subs.push(sub) } // 移除一个观察者 removeSub (sub: Watcher) { remove(this.subs, sub) } // 依赖收集，当存在Dep.target的时候添加Watcher观察者对象 depend () { if (Dep.target) { Dep.target.addDep(this) } } // 通知所有订阅者 notify () { // stabilize the subscriber list first const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } } } // the current target watcher being evaluated. // this is globally unique because there could be only one // watcher being evaluated at any time. Dep.target = null // 收集完依赖之后，将Dep.target设置为null，防止继续收集依赖 Watcher
Watcher是一个观察者对象，依赖收集以后Watcher对象会被保存在Deps中，数据变动的时候会由Deps通知Watcher实例。定义在/src/core/observer/watcher.js中：
/** * A watcher parses an expression, collects dependencies, * and fires callback when the expression value changes. * This is used for both the $watch() api and directives. */ export default class Watcher { vm: Component; expression: string; cb: Function; id: number; deep: boolean; user: boolean; computed: boolean; sync: boolean; dirty: boolean; active: boolean; dep: Dep; 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 ) { this.vm = vm if (isRenderWatcher) { vm._watcher = this } vm._watchers.push(this) // options if (options) { this.deep = !!options.deep this.user = !!options.user this.computed = !!options.computed this.sync = !!options.sync this.before = options.before } else { this.deep = this.user = this.computed = this.sync = false } this.cb = cb this.id = ++uid // uid for batching this.active = true this.dirty = this.computed // for computed watchers this.deps = [] this.newDeps = [] this.depIds = new Set() this.newDepIds = new Set() this.expression = process.env.NODE_ENV !== 'production' ? expOrFn.toString() : '' // parse expression for getter if (typeof expOrFn === 'function') { this.getter = expOrFn } else { this.getter = parsePath(expOrFn) if (!this.getter) { this.getter = function () {} 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 ) } } if (this.computed) { this.value = undefined this.dep = new Dep() } else { this.value = this.get() } } /** * Evaluate the getter, and re-collect dependencies. */ get () { 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. */ update () { /* istanbul ignore else */ if (this.computed) { // A computed property watcher has two modes: lazy and activated. // It initializes as lazy by default, and only becomes activated when // it is depended on by at least one subscriber, which is typically // another computed property or a component's render function. if (this.dep.subs.length === 0) { // In lazy mode, we don't want to perform computations until necessary, // so we simply mark the watcher as dirty. The actual computation is // performed just-in-time in this.evaluate() when the computed property // is accessed. this.dirty = true } else { // In activated mode, we want to proactively perform the computation // but only notify our subscribers when the value has indeed changed. this.getAndInvoke(() => { this.dep.notify() }) } } else if (this.sync) { this.run() } else { queueWatcher(this) } } /** * Scheduler job interface. * Will be called by the scheduler. */ run () { if (this.active) { this.getAndInvoke(this.cb) } } getAndInvoke (cb: Function) { 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 this.dirty = false if (this.user) { try { cb.call(this.vm, value, oldValue) } catch (e) { handleError(e, this.vm, `callback for watcher "${this.expression}"`) } } else { cb.call(this.vm, value, oldValue) } } } /** * Evaluate and return the value of the watcher. * This only gets called for computed property watchers. */ evaluate () { if (this.dirty) { this.value = this.get() this.dirty = false } return this.value } /** * Depend on this watcher. Only for computed property watchers. */ depend () { if (this.dep && Dep.target) { this.dep.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 } } } 最后
响应式系统的原理基本梳理完了，现在再回过头来看这幅图的下半部分是不是清晰来呢。