这一篇我们来看一下Vue核心的响应性原理，在上一篇我们知道了初始化时Vue会把data选项的数据递归的转换成响应性的数据，具体来说就是给数组和对象创建一个关联的Observer实例，然后对于数组，会拦截它的所有方法，以此来监听数组的变化，对于普通对象，会遍历它自身所有可枚举的属性，将其转换成setter和getter形式，以此来监听某个属性的变化，为什么要这么做呢，我们来看一下。
首先简单介绍一下挂载的逻辑，如果我们传递了模板字符串，那么会进行编译，编译模板这个过程非常复杂，反正最后会将其转换为渲染函数，如果直接是渲染函数了那么就没有这个过程，像我们平时使用Vue单文件的形式开发的话，在打包阶段其实就已经编译好了，渲染函数就是返回虚拟DOM（也就是VNode）的函数，VNode怎么转换成实际的DOM呢，其中涉及到虚拟DOM的patch算法，后面会介绍，只要记得这个过程会获取模板里使用到的数据。接着还会给每个Vue实例创建一个Watcher实例，这部分的代码简化如下：
// 更新组件的方法 let updateComponent = () => { // 执行渲染函数产出VNode，然后调用_update方法进行打补丁 vm._update(vm._render(), hydrating) } new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted && !vm._isDestroyed) { callHook(vm, 'beforeUpdate') } } }, true /* isRenderWatcher */)
定义了一个更新方法，然后传给Watcher，看Watcher类的实现之前我们先看一下Dep类的实现。
Dep类
dep是一个可观察对象，可以有多个指令订阅它：
let uid = 0 export default class Dep { static target; id; subs; constructor () { this.id = uid++ this.subs = [] } }
定义了两个实例属性，一个静态属性，subs数组就是用来存放订阅它的对象，有四个实例方法：
1.添加订阅者
addSub (sub) { this.subs.push(sub) }
2.删除订阅者
removeSub (sub) { remove(this.subs, sub) }
3.依赖收集
depend () { if (Dep.target) { Dep.target.addDep(this) } }
4.通知订阅者更新
notify () { // 只通知此刻存在的订阅者，调用其update方法 const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } }
Watcher类
dep的订阅者其实就是Watcher实例：
export default class Watcher { constructor ( vm, expOrFn, cb, options, isRenderWatcher ) { this.vm = vm // 如果是渲染watcher，那么会将该Watcher实例添加到Vue实例的_watcher属性中 if (isRenderWatcher) { vm._watcher = this } 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 this.active = true this.dirty = this.lazy // lazy watchers this.deps = [] this.newDeps = [] this.depIds = new Set() this.newDepIds = new Set() this.expression = '' // 从表达式中解析出getter if (typeof expOrFn === 'function') { this.getter = expOrFn } else { this.getter = parsePath(expOrFn) if (!this.getter) { this.getter = noop } } // 执行取值方法，计算当前的值 this.value = this.lazy ? undefined : this.get() } }
watcher做的事情主要是解析表达式、依赖收集、并在表达式的值发生改变时触发回调。Vue把给组件创建的Watcher实例称为渲染watcher。
构造函数里先定义了一堆变量，然后判断表达式的类型，是函数的话那么直接使用该函数作为取值函数，否则调用parsePath方法来解析路径，并返回一个取值函数，这是一个简单的解析方法，只支持对.分隔的字符串进行解析：
const bailRE = new RegExp(`[^${unicodeLetters}.$_\\d]`) export function parsePath (path) { if (bailRE.test(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 } }
比如实例的data结构如下：
let vm = new Vue({ data: { a: { b: { c: 1 } } } })
那么当我们使用表达式a.b.c来创建Watcher实例的话：
new Watcher(vm, 'a.b.c', () => {})
那么以vm为上下文执行parsePath方法返回的函数时就能成功获取到值1。
构造函数的最后，如果lazy不为true的话会立即执行取值函数get，计算表达式的当前值。
依赖收集
具体到开头的挂载过程，表达式expOrFn就是updateComponent函数，也就是Watcher实例的this.getter，它会在get函数里调用：
get () { pushTarget(this) let value const vm = this.vm try { value = this.getter.call(vm, vm) } catch (e) {} finally { // "touch"每个属性，以便它们都作为依赖项进行跟踪，以便进行深入观察 if (this.deep) { traverse(value) } popTarget() this.cleanupDeps() } return value }
首先执行了pushTarget方法：
// 当前正在计算执行中的目标watcher // 这是全局唯一的，因为一次只能同时执行一个观察者。 Dep.target = null const targetStack = [] export function pushTarget (target) { targetStack.push(target) Dep.target = target }
Dep.target是一个全局变量，这一步相当于把当前的这个Watcher实例赋值给了Dep.target属性。
随后执行了getter函数，也就是执行updateComponent函数，在vm._render函数中会获取我们定义在data中的数据（如果模板里使用到了的话），此时，就会触发对应
数据的getter函数。
比如：
<div>{{a}}</div>
new Vue({ data: { a: 1 } })
在执行渲染函数的时候会执行vm.a来获取a的值，属性a已经被转换成了getter和setter的形式：
Object.defineProperty(obj, key, { get: function reactiveGetter() { const value = getter ? getter.call(obj) : val // Dep.target就是当前的Watcher实例 if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value } })
所以会触发属性a的get函数执行，此时Dep.target就是当前的Watcher实例，那么会执行dep.depend方法，dep是属性a的依赖收集对象，depend方法内会执行Dep.target也就是当前的Watcher实例的addDep方法：
export default class Watcher { addDep (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) } } } }
可以看到这里把属性a的dep添加到了newDeps 集合中，为什么不直接添加到deps中呢？而要区分新旧呢？这其实要结合cleanupDeps方法一起看，这个方法在get方法的最后调用了，用来清理依赖项：
export default class Watcher { cleanupDeps () { let i = this.deps.length // 如果之前依赖某个dep，此时不依赖了，那么要从对应dep里删除该watcher while (i--) { const dep = this.deps[i] if (!this.newDepIds.has(dep.id)) { dep.removeSub(this) } } // newDepIds转为depIds，并清空旧的depIds let tmp = this.depIds this.depIds = this.newDepIds this.newDepIds = tmp this.newDepIds.clear() // newDeps转为deps，并清空旧的deps tmp = this.deps this.deps = this.newDeps this.newDeps = tmp this.newDeps.length = 0 } }
现在应该很清楚为什么要区分新旧了，因为当前watcher之前的依赖项，现在可能已经不依赖了，那么要找出不再依赖的dep，并从中删除当前watcher，所以需要一个新旧对比的过程。
addDep方法执行完后，属性a的dep里会收集到当前的渲染watcher，渲染watcher里也会保存属性a的dep。
回到a的getter函数，depend函数执行完后，接着：
if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } }
如果属性a的值是数组或对象的话，那么也会创建一个关联的Observer实例：
let childOb = !shallow && observe(val)
这里相当于当前的渲染watcher也会同时订阅a的值对应的dep对象，比如下面这种情况：
new Vue({ data: { a: { b: 1 } } })
渲染watcher的deps数组一共会收集到两个dep实例，一个是属性a的，一个是a的值的。
最后对于a的值为数组的情况还调用了dependArray方法：
function dependArray(value ) { for (let e, i = 0, l = value.length; i < l; i++) { e = value[i] e && e.__ob__ && e.__ob__.dep.depend() if (Array.isArray(e)) { dependArray(e) } } }
递归遍历数组，对所有对象都进行依赖收集。
总结一下，当我们创建一个Vue实例时，内部会创建一个渲染watcher，watcher实例化时会把自身赋值给全局的Dep.target，然后执行取值函数，也就是会执行渲染函数，如果模板里引用了data的数据，那么就会触发对data数据的读取，相应的会触发对应属性的getter，在getter里会进行依赖收集，也就是会把Dep.target属性指向的watcher收集为依赖添加到它的dep实例中，同样该watcher也会保存该dep，如果该属性存在子observer，那么也会进行依赖收集，如果该属性的值是数组类型，还
会递归遍历数组，给每个对象类型的数组项都进行依赖收集。
接下来回到Watcher实例的get方法，执行完取值方法把依赖收集完毕后：
if (this.deep) { traverse(value) }
如果deep选项配置为true的话，那么会对值调用traverse方法，对于实例化Vue时，该选项是false，所以并不会走这里，我们以一个其他例子来看：
new Vue({ data: { obj: { a: { b: 1 } } }, created() { this.$watch('obj', () => { console.log('变了') }) setTimeout(() => { this.obj.a.b = 2 }, 2000); } })
这个例子中，两秒后我们修改了obj.a.b的属性值，它并不会触发回调，当我们deep设为true时，就会触发：
this.$watch('obj', () => { console.log('变了') }, { deep: true })
这就是上面的traverse函数做的事情，这里的取值函数返回的value就是obj的值。
const seenObjects = new Set() export function traverse (val) { _traverse(val, seenObjects) seenObjects.clear() }
调用了_traverse方法：
export function traverse (val) { _traverse(val, seenObjects) seenObjects.clear() } function _traverse (val, seen) { let i, keys const isA = Array.isArray(val) // 非数组和对象就返回 if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) { return } if (val.__ob__) { // 这里我猜测是避免循环引用 const depId = val.__ob__.dep.id if (seen.has(depId)) { return } seen.add(depId) } // 递归 if (isA) { i = val.length while (i--) _traverse(val[i], seen) } else { keys = Object.keys(val) i = keys.length while (i--) _traverse(val[keys[i]], seen) } }
其实就是一个简单的递归函数，递归遍历了所有的数组项和对象的key，为什么这样就能实现监听深层值的变化呢，很简单，因为读取了所有的属性，也就是触发了它们的getter函数，所以所有属性的dep都收集了当前的watcher实例，那么当然如何一层里的任何一个属性修改了都会触发该watcher实例的更新。
回到get函数，接下来的逻辑：
popTarget() this.cleanupDeps()
get函数的开始调用了pushTarget，依赖收集完毕当然要撤销这个操作：
export function popTarget () { targetStack.pop() Dep.target = targetStack[targetStack.length - 1] }
cleanupDeps方法前面已经说过，不再赘述。
到这里，Watcher实例化的过程就已经结束了，现在我们的依赖都已经收集完毕，那么它们有什么用呢？
触发依赖更新
例子如下：
new Vue({ el: '#app', template: ` <ul> <li v-for="item in list">{{item}}</li> </ul> `, data: { list: [1, 2, 3] }, created() { setTimeout(() => { this.list = [4, 5, 6] }, 5000); } })
先来考考大家，这个例子里面的渲染watcher会收集到几个dep呢？
点击查看答案
2个，list属性一个，list的属性值数组一个
五秒后我们修改了list的值，显然会触发它的setter：
Object.defineProperty(obj, key, { set: function reactiveSetter(newVal) { const value = getter ? getter.call(obj) : val // 值没有变化则直接返回 if (newVal === value || (newVal !== newVal && value !== value)) { return } // #7981: 对于不带setter的访问器属性 if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal } // 观察新的值 childOb = !shallow && observe(newVal) // 触发更新 dep.notify() } })
首先更新属性值，然后如果新的值是数组或对象的话那么会调用observe方法来将它转成响应式的，这样当我们修改这个新数组或新对象本身时才能触发更新。
最后通知依赖更新，这里的依赖就是渲染watcher，notify方法里会调用watcher的update方法：
export default class Watcher { update () { if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) } } }
可以看到有三个分支，如果lazy为true的话那么只设置一下dirty属性，这个属性具体有什么作用后面我们如果遇到了再说，如果是同步的，那么会直接执行run函数：
run () { if (this.active) { const value = this.get() if ( value !== this.value || // 即使值相同，深度的watcher和对象/数组上的watcher也应该触发，因为值可能已经发生了变化。 isObject(value) || this.deep ) { // 设置为新值 const oldValue = this.value this.value = value // 用户的watcher，即通过$watch方法或watch选项设置的 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) } } } }
这个函数的核心就是调用了get方法更新当前表达式的值，然后当值有变化则会调用回调函数。
当也不是同步的watcher，那么会执行queueWatcher方法，这个涉及到Vue的调度功能，也就是异步批量执行的功能，我们会单独开一篇文章来介绍。
总结一下如何触发依赖更新，当依赖收集完毕后，如果我们更新了某个属性的值，那么该属性值的getter函数会被执行，就会通知保存在该属性值的dep里的所有依赖，调用它们的update方法进行更新。
对于我们开头的例子，也就是会调用渲染watcher的update方法，重新执行取值函数，也就是会执行updateComponent方法来重新执行渲染函数，并进行打补丁更新组件，达到数据更新页面自动更新的效果。
