下面将围绕一个例子，讲解一下computed初始化及更新时的流程，来看看计算属性是怎么实现的缓存，及依赖是怎么被收集的。

复制
1<div id="app">
2  <span @click="change">{{sum}}</span>
3</div>
4<script src="./vue2.6.js"></script>
5<script>
6  new Vue({
7    el: "#app",
8    data() {
9      return {
10        count: 1,
11      }
12    },
13    methods: {
14      change() {
15        this.count = 2
16      },
17    },
18    computed: {
19      sum() {
20        return this.count + 1
21      },
22    },
23  })
24</script>

初始化 computed

vue初始化时先执行init方法，里面的initState会进行计算属性的初始化

复制
1if (opts.computed) {initComputed(vm, opts.computed);}

下面是initComputed的代码

复制
1var watchers = vm._computedWatchers = Object.create(null); 
2// 依次为每个 computed 属性定义一个计算watcher
3for (const key in computed) {
4  const userDef = computed[key]
5  watchers[key] = new Watcher(
6      vm, // 实例
7      getter, // 用户传入的求值函数 sum
8      noop, // 回调函数 可以先忽视
9      { lazy: true } // 声明 lazy 属性 标记 computed watcher
10  )
11  // 用户在调用 this.sum 的时候，会发生的事情
12  defineComputed(vm, key, userDef)
13}

每个计算属性对应的计算watcher的初始状态如下：

复制
1{
2    deps: [],
3    dirty: true,
4    getter: ƒ sum(),
5    lazy: true,
6    value: undefined
7}

可以看到它的 value 刚开始是 undefined，lazy 是 true，说明它的值是惰性计算的，只有到真正在模板里去读取它的值后才会计算。

这个 dirty 属性其实是缓存的关键，先记住它。

接下来看看比较关键的 defineComputed，它决定了用户在读取 this.sum 这个计算属性的值后会发生什么，继续简化，排除掉一些不影响流程的逻辑。

复制
1Object.defineProperty(target, key, { 
2    get() {
3        // 从刚刚说过的组件实例上拿到 computed watcher
4        const watcher = this._computedWatchers && this._computedWatchers[key]
5        if (watcher) {
6          // 只有dirty了才会重新求值
7          if (watcher.dirty) {
8            // 这里会求值，会调用get，会设置Dep.target
9            watcher.evaluate()
10          }
11          // 这里也是个关键 等会细讲
12          if (Dep.target) {
13            watcher.depend()
14          }
15          // 最后返回计算出来的值
16          return watcher.value
17        }
18    }
19})

这个函数需要仔细看看，它做了好几件事，我们以初始化的流程来讲解它：

首先 dirty 这个概念代表脏数据，说明这个数据需要重新调用用户传入的 sum 函数来求值了。我们暂且不管更新时候的逻辑，第一次在模板中读取到 {{sum}} 的时候它一定是 true，所以初始化就会经历一次求值。

复制
1evaluate () {
2  // 调用 get 函数求值
3  this.value = this.get()
4  // 把 dirty 标记为 false
5  this.dirty = false
6}

这个函数其实很清晰，它先求值，然后把 dirty 置为 false。再回头看看我们刚刚那段 Object.defineProperty 的逻辑，下次没有特殊情况再读取到 sum 的时候，发现 dirty是false了，是不是直接就返回 watcher.value 这个值就可以了，这其实就是计算属性缓存的概念。

依赖收集

初始化完成之后，最终会调用render进行渲染，而render函数会作为watcher的getter，此时的watcher为渲染watcher。

复制
1updateComponent = () => {
2  vm._update(vm._render(), hydrating)
3}
4// 创建一个渲染watcher，渲染watcher初始化时，就会调用其get()方法，即render函数，就会进行依赖收集
5new Watcher(vm, updateComponent, noop, {}, true /* isRenderWatcher */)

看一下watcher中的get方法

复制
1get () {
2    // 将当前watcher放入栈顶，同时设置给Dep.target
3    pushTarget(this)
4    let value
5    const vm = this.vm
6    // 调用用户定义的函数，会访问到this.count，从而访问其getter方法，下面会讲到
7    value = this.getter.call(vm, vm)
8    // 求值结束后，当前watcher出栈
9    popTarget()
10    this.cleanupDeps()
11    return value
12 }

渲染watcher的getter执行时（render函数），会访问到this.sum，就会触发该计算属性的getter，即在initComputed时定义的该方法，会把与sum绑定的计算watcher得到之后，因为初始化时dirty为true，会调用其evaluate方法，最终会调用其get()方法，把该计算watcher放入栈顶，此时Dep.target也为该计算watcher。

接着调用其get方法，就会访问到this.count，会触发count属性的getter（如下），就会将当前Dep.target存放的watcher收集到count属性对应的dep中。此时求值结束，调用popTarget()将该watcher出栈，此时上个渲染watcher就在栈顶了，Dep.target重新为渲染watcher。

复制
1// 在闭包中，会保留对于 count 这个 key 所定义的 dep
2const dep = new Dep()
3 
4// 闭包中也会保留上一次 set 函数所设置的 val
5let val
6 
7Object.defineProperty(obj, key, {
8  get: function reactiveGetter () {
9    const value = val
10    // Dep.target 此时就是计算watcher
11    if (Dep.target) {
12      // 收集依赖
13      dep.depend()
14    }
15    return value
16  },
17})

复制
1// dep.depend()
2depend () {
3  if (Dep.target) {
4    Dep.target.addDep(this)
5  }
6}

复制
1// watcher 的 addDep函数
2addDep (dep: Dep) {
3  // 这里做了一系列的去重操作 简化掉 
4  
5  // 这里会把 count 的 dep 也存在自身的 deps 上
6  this.deps.push(dep)
7  // 又带着 watcher 自身作为参数
8  // 回到 dep 的 addSub 函数了
9  dep.addSub(this)
10}

复制
1class Dep {
2  subs = []
3 
4  addSub (sub: Watcher) {
5    this.subs.push(sub)
6  }
7}

通过这两段代码，计算watcher就被属性所绑定dep所收集。watcher依赖dep，dep同时也依赖watcher，它们之间的这种相互依赖的数据结构，可以方便知道一个watcher被哪些dep依赖和一个dep依赖了哪些watcher。

接着执行watcher.depend()

复制
1// watcher.depend
2depend () {
3  let i = this.deps.length
4  while (i--) {
5    this.deps[i].depend()
6  }
7}

还记得刚刚的 计算watcher 的形态吗？它的 deps 里保存了 count 的 dep。也就是说，又会调用 count 上的 dep.depend()

复制
1class Dep {
2  subs = []
3  
4  depend () {
5    if (Dep.target) {
6      Dep.target.addDep(this)
7    }
8  }
9}

这次的 Dep.target 已经是 渲染watcher 了，所以这个 count 的 dep 又会把 渲染watcher 存放进自身的 subs 中。

最终count的依赖收集完毕，它的dep为:

复制
1{
2    subs: [ sum的计算watcher，渲染watcher ]
3}

派发更新

那么来到了此题的重点，这时候 count 更新了，是如何去触发视图更新的呢？

再回到 count 的响应式劫持逻辑里去：

复制
1// 在闭包中，会保留对于 count 这个 key 所定义的 dep
2const dep = new Dep()
3 
4// 闭包中也会保留上一次 set 函数所设置的 val
5let val
6 
7Object.defineProperty(obj, key, {
8  set: function reactiveSetter (newVal) {
9      val = newVal
10      // 触发 count 的 dep 的 notify
11      dep.notify()
12    }
13  })
14})

好，这里触发了我们刚刚精心准备的 count 的 dep 的 notify 函数。

复制
1class Dep {
2  subs = []
3  
4  notify () {
5    for (let i = 0, l = subs.length; i < l; i++) {
6      subs[i].update()
7    }
8  }
9}

这里的逻辑就很简单了，把 subs 里保存的 watcher 依次去调用它们的 update 方法，也就是

1. 调用 计算watcher 的 update
2. 调用 渲染watcher 的 update

计算watcher的update

复制
1update () {
2  if (this.lazy) {
3    this.dirty = true
4  }
5}

仅仅是把 计算watcher 的 dirty 属性置为 true，静静的等待下次读取即可（再次执行render函数时，会再次访问到sum属性，此时的dirty为true，就会进行再次求值）。

渲染watcher的update

这里其实就是调用 vm._update(vm._render()) 这个函数，重新根据 render 函数生成的 vnode 去渲染视图了。
而在 render 的过程中，一定会访问到su 这个值，那么又回到sum定义的get上：

复制
1Object.defineProperty(target, key, { 
2    get() {
3        const watcher = this._computedWatchers && this._computedWatchers[key]
4        if (watcher) {
5          // 上一步中 dirty 已经置为 true, 所以会重新求值
6          if (watcher.dirty) {
7            watcher.evaluate()
8          }
9          if (Dep.target) {
10            watcher.depend()
11          }
12          // 最后返回计算出来的值
13          return watcher.value
14        }
15    }
16})

由于上一步中的响应式属性更新，触发了 计算 watcher 的 dirty 更新为 true。所以又会重新调用用户传入的 sum 函数计算出最新的值，页面上自然也就显示出了最新的值。

至此为止，整个计算属性更新的流程就结束了。

总结一下

1. 初始化data和computed,分别代理其set以及get方法, 对data中的所有属性生成唯一的dep实例。
2. 对computed中的sum生成唯一watcher,并保存在vm._computedWatchers中
3. 执行render函数时会访问sum属性，从而执行initComputed时定义的getter方法，会将Dep.target指向sum的watcher,并调用该属性具体方法sum。
4. sum方法中访问this.count，即会调用this.count代理的get方法，将this.count的dep加入sum的watcher,同时该dep中的subs添加这个watcher。
5. 设置vm.count = 2，调用count代理的set方法触发dep的notify方法，因为是computed属性，只是将watcher中的dirty设置为true。
6. 最后一步vm.sum，访问其get方法时，得知sum的watcher.dirty为true,调用其watcher.evaluate()方法获取新的值。