vue computed缓存原理

vue在初始化computed时会创建一个Watcher的实例，一开始lazy:true、dirty:true，就不会执行get()方法也就是不会计算属性值。当执行render函数时就会执行计算属性的get()方法，也就是在里面判断dirty是true还是false，为true就会调用evaluate()方法，它会执行get()方法，在取值前会先执行pushTarget()方法来将全局的Dep.target指向当前[computed的Watcher]，在执行get()过程中会使用到data属性然后就会收集依赖，会将[computed的Watcher]添加到数据对应的Dep中。当执行完以上后Watcher就退出targetStack，接着Dep.target就会指向[render函数的watcher]，然后判断当前Dep.target有值就执行Dep.depend()方法，depend是将[render函数的watcher]添加到[computed的watcher]的Dep实例中，这样当数据发生变化这两个都会收到通知然后渲染。最后把计算出最新的值赋给values并返回，同时把dirty设为false，当后面再用到这个data就判断dirty为false就从缓存里取。当依赖的数据改变了会触set()方法，然后调用Dep.notify()方法来通知[computed的Watcher]和[render函数的watcher]，然后触发它们的update方法来让dirty = true，最后再重新计算value值。

参考：
https://www.jianshu.com/p/f238a4d5716e
https://blog.youkuaiyun.com/qq_42072086/article/details/106993983
https://blog.youkuaiyun.com/qq_20282263/article/details/88089821
https://blog.youkuaiyun.com/liu19721018/article/details/125574441
https://techgogogo.blog.youkuaiyun.com/article/details/127434289