详解vue computed的缓存实现原理
本文围绕下面这个例子，讲解一下computed初始化及更新时的流程，来看看计算属性是怎么实现的缓存，及依赖是怎么被收集的。
初始化 computed
vue初始化时先执行init方法，里面的initstate会进行计算属性的初始化
下面是initcomputed的代码
每个计算属性对应的计算watcher的初始状态如下：
可以看到它的 value 刚开始是 undefined，lazy 是 true，说明它的值是惰性计算的，只有到真正在模板里去读取它的值后才会计算。
这个 dirty 属性其实是缓存的关键，先记住它。
接下来看看比较关键的 definecomputed，它决定了用户在读取 this.sum 这个计算属性的值后会发生什么，继续简化，排除掉一些不影响流程的逻辑。
这个函数需要仔细看看，它做了好几件事，我们以初始化的流程来讲解它：
首先 dirty 这个概念代表脏数据，说明这个数据需要重新调用用户传入的 sum 函数来求值了。我们暂且不管更新时候的逻辑，第一次在模板中读取到 {{sum}} 的时候它一定是 true，所以初始化就会经历一次求值。
这个函数其实很清晰，它先求值，然后把 dirty 置为 false。再回头看看我们刚刚那段 object.defineproperty 的逻辑，下次没有特殊情况再读取到 sum 的时候，发现 dirty是false了，是不是直接就返回 watcher.value 这个值就可以了，这其实就是计算属性缓存的概念。
依赖收集
初始化完成之后，最终会调用render进行渲染，而render函数会作为watcher的getter，此时的watcher为渲染watcher。
看一下watcher中的get方法
渲染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。
通过这两段代码，计算watcher就被属性所绑定dep所收集。watcher依赖dep，dep同时也依赖watcher，它们之间的这种相互依赖的数据结构，可以方便知道一个watcher被哪些dep依赖和一个dep依赖了哪些watcher。
接着执行watcher.depend()
还记得刚刚的 计算watcher 的形态吗？它的 deps 里保存了 count 的 dep。也就是说，又会调用 count 上的 dep.depend()
这次的 dep.target 已经是 渲染watcher 了，所以这个 count 的 dep 又会把 渲染watcher 存放进自身的 subs 中。
最终count的依赖收集完毕，它的dep为:
派发更新
那么来到了此题的重点，这时候 count 更新了，是如何去触发视图更新的呢？
再回到 count 的响应式劫持逻辑里去：
好，这里触发了我们刚刚精心准备的 count 的 dep 的 notify 函数。
这里的逻辑就很简单了，把 subs 里保存的 watcher 依次去调用它们的 update 方法，也就是
- 调用 计算watcher 的 update
- 调用 渲染watcher 的 update
计算watcher的update
仅仅是把 计算watcher 的 dirty 属性置为 true，静静的等待下次读取即可（再次执行render函数时，会再次访问到sum属性，此时的dirty为true，就会进行再次求值）。
渲染watcher的update
这里其实就是调用 vm._update(vm._render()) 这个函数，重新根据 render 函数生成的 vnode 去渲染视图了。
而在 render 的过程中，一定会访问到su 这个值，那么又回到sum定义的get上：
由于上一步中的响应式属性更新，触发了 计算 watcher 的 dirty 更新为 true。所以又会重新调用用户传入的 sum 函数计算出最新的值，页面上自然也就显示出了最新的值。
至此为止，整个计算属性更新的流程就结束了。
总结一下
- 初始化data和computed,分别代理其set以及get方法, 对data中的所有属性生成唯一的dep实例。
- 对computed中的sum生成唯一watcher,并保存在vm._computedwatchers中
- 执行render函数时会访问sum属性，从而执行initcomputed时定义的getter方法，会将dep.target指向sum的watcher,并调用该属性具体方法sum。
- sum方法中访问this.count，即会调用this.count代理的get方法，将this.count的dep加入sum的watcher,同时该dep中的subs添加这个watcher。
- 设置vm.count = 2，调用count代理的set方法触发dep的notify方法，因为是computed属性，只是将watcher中的dirty设置为true。
- 最后一步vm.sum，访问其get方法时，得知sum的watcher.dirty为true,调用其watcher.evaluate()方法获取新的值。
以上就是详解vue computed的缓存实现原理的详细内容，更多关于vue computed的缓存实现的资料请关注其它相关文章！