第 141 题：Vue 中的 computed 是如何实现的？

Question

computed 是 vue 的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新，一般情况下，computed 默认使用的是 getter 属性。

Answer 1

所以computed的缓存是什么原因呢

Answer 2

初始化阶段：
创建每一个计算属性对应的 watcher , dirty 为true, 将计算属性定义到实例上， 就可通过this.xxx 获取。
同时会对计算方法做一层包装：根据 dirty 判断是执行方法还是返回缓存值 （watcher.value）

第一次获取计算属性值：

1. 会执行 watcher 的 evaluate 方法 , 这个 evalute 就是执行了计算方法 然后更新 watcher 的 value。并且设置了dirty 为 false
2. 重点： 在执行计算方法的时候， 会触发每一个依赖的响应数据的 get 而此时 Dep.target 就是当前计算属性对应的watcher
3.   依赖的相应数据 会 将当前的watcher 放入自己管理的订阅器中（依赖收集）。
4. 这样当某个依赖的相应数据变更的时候，触发订阅器发布更新，会执行上面watcher 的 update方法，这个update方法知道这是个计算属性的watcher 就干了一件事， 把dirty 设为 true

第二次获取计算属性值：
  如果依赖的相应数据又变更，那么 watcher.dirty=true，会执行计算方法获取新值，否则获取到缓存的 watcher.value。

Answer 3

在initComputed中遍历每一个computed属性，创建对应的Watcher。在Watcher实例化过程中，计算computed属性结果，会对依赖的data进行取值，从而触发data的getter进行依赖收集，将当前Watcher加入到订阅者数组中。当computed属性依赖的data改变时，会触发data的setter通知订阅者更新，这个computed会重新计算。

Answer 4

computed中的属性，通过代理，代理到vue的data上，对data进行处理的时候，已经添加了getter方法，然后当从vue实例上取该值的时候，将实例本身传递进computed函数内部，然后就可以拿到返回值了。
所以函数内部有值改变的时候，触发watcher，computed也会跟着重新计算

Answer 5

https://ustbhuangyi.github.io/vue-analysis/reactive/computed-watcher.html

链接挂了

这本电子书改版了，所以之前的链接失效了，回到首页就可以看到了

Answer 6

https://ustbhuangyi.github.io/vue-analysis/reactive/computed-watcher.html

链接挂了

Answer 7

computed本身是通过代理的方式代理到组件实例上的，所以读取计算属性的时候，执行的是一个内部的getter，而不是用户定义的方法。

computed内部实现了一个惰性的watcher，在实例化的时候不会去求值，其内部通过dirty属性标记计算属性是否需要重新求值。当computed依赖的任一状态（不一定是return中的）发生变化，都会通知这个惰性watcher，让它把dirty属性设置为true。所以，当再次读取这个计算属性的时候，就会重新去求值。

反对楼上说的，惰性watcher/计算属性在创建时是不会去求值的，是在使用的时候去求值的。

确实,更正一下

Answer 8

computed本身是通过代理的方式代理到组件实例上的，所以读取计算属性的时候，执行的是一个内部的getter，而不是用户定义的方法。

computed内部实现了一个惰性的watcher，在实例化的时候不会去求值，其内部通过dirty属性标记计算属性是否需要重新求值。当computed依赖的任一状态（不一定是return中的）发生变化，都会通知这个惰性watcher，让它把dirty属性设置为true。所以，当再次读取这个计算属性的时候，就会重新去求值。

反对楼上说的，惰性watcher/计算属性在创建时是不会去求值的，是在使用的时候去求值的。

Answer 9

实质是一个惰性的watcher，在取值操作时根据自身标记 dirty属性返回上一次计算结果/重新计算值
在创建时就进行一次取值操作，收集依赖变动的对象/属性(将自身压入dep中)
在依赖的对象/属性变动时，仅将自身标记dirty致为true

Answer 10

之前的链接没用了，修改下新的链接：
https://ustbhuangyi.github.io/vue-analysis/v2/reactive/computed-watcher.html