前言 

这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 

主要记录的是 vue 的相关实现机制 

呵呵 理解本文需要 vue 的使用基础, js 的使用基础 

 测试用例

用例如下, 我们这里核心关注 counterPlus100 这个计算变量 

问题的调试

从上下文来看 这是这里是在渲染 HelloWorld 组件的地方

渲染 “this is counterPlus100 : 100” 对应的 #text 节点, 需要获取 this.counterPlus100 的值 

编译出来的 render 函数如下 

获取变量的值的方式如下, 如果有依赖被更新了, 则重新计算 

否则 直接获取之前计算的结果

这个就是官方文档提到的 “计算属性缓存”, 下一次获取对应的值, 如果依赖没有变化, 则直接获取 Watcher.value

计算属性缓存 的具体的体现方式, 业务代码中访问 计算属性的时候, 直接走 counterPlus100 的 computedGetter

初始化 VueComponent.counterPlus100 的 getter 的地方 

初始化 this._computedWatchers 的地方 

当 counter 变量更新的时候, 第二个 Watcher 是 counterPlus100 的 Watcher 

它是懒处理的, 他仅仅是更新了 dirty 的标记, 然后 下一次获取 counterPlus100 值的时候 重新计算

counterPlus100 对应的 Watcher 的处理如下 

完