计算属性和watch 的疑问

Question

老师我有两个疑问：

1. 计算属性 和 watch 属性的 对象 是什么时候变成响应式对象的？
2. 开发中发现计算属性get中只能同步进行，而watch 中支持异步， 从源码角度 怎么来理解呢

Answer 1

ustbhuangyi 2020-12-30 17:50:16

这里，如果是在模板中访问计算属性 b，触发了它的 Getter，在 evaluate 执行完毕后，这个时候 Dep.target 是 render watcher，那么再执行 watcher.depend，就相当于把计算属性的依赖 a 收集到这个 render watcher 中了，这样 a 变了，除了触发计算属性 watcher 的 update 设置 dirty 为 true，还会触发 render watcher 重新计算，进而触发组件重新渲染，然后模板中再次访问 b，这个时候 dirty 为 true，又重新求值了。

• 提问者 慕粉4283821 #1

  那是不是可以理解为 其实 b 是一个computed watcher ，这个watcher 的 value 是 b的值， 因为b getter 中 定义的其他响应式属性的变化 从而触发b这个计算watcher重新计算 而 改变 b 的值的。这一点 和 data中定义的 响应式属性不一样， b是订阅依赖， 而 a 是依赖被订阅

• ustbhuangyi 回复 提问者 慕粉4283821 #2

  b getter 中 定义的其他响应式属性的变化 从而触发b这个计算 watcher 执行 update，这个时候只是把 dirty 设置为 true，并没有重新计算，重新计算是在 b 再次被访问的时候执行的。
  我以上的分析是基于 Vue.js 最新的 2.6.x 版本的，课程中的 2.5.17-beta 版本关于计算属性的实现还略有不同。

• 提问者 慕粉4283821 回复 ustbhuangyi #3

  嗯嗯，这下清楚了，感谢老师！！

Answer 2

提问者 慕粉4283821 2020-12-30 08:29:07

比如我们在script里面定义了

data: {
    return { a: 1 };
},
computed: {
    b() {
      return this.a + 1
    }
}

如上述代码，我知道如果 b 在渲染时用到的话，会触发b的get，执行computed watcher 的 evaluate 方法计算，在这个过程中 computed watcher 就会 订阅 依赖 a 。  之后 a 更新也会触发 computed watcher 的重新计算。 。  我想问的 是 里面的属性 b  是什么时候被  当前组件 渲染 watcher 收集的， 一直没看到这里

Answer 3

ustbhuangyi 2020-12-28 09:53:05

1. 计算属性和 watch 属性的初始化过程都是发生在 initState 的过程中


它们内部都是通过 watcher 实现的，而在 watcher 中访问数据，该 watcher 就会被当做依赖收集起来，因为在 watcher 计算的时候，会执行 pushTarget，修改 Dep.target。

2. 计算属性和 watch 和异步都无关系，你所说的 watch 中支持异步，是指在 watch 的回调函数执行异步逻辑吧，这个和源码实现本身无关。

• 提问者 慕粉4283821 #1

  老师，这里还是有点疑问，回复里面不方便写代码， 写在回答下面了，麻烦老师看下

Answer 4

提问者 慕粉4283821 2020-12-27 17:50:14

关于第二点， 是不是因为 计算属性的get 是当成 watcher 的getter 去调用的，如果存在异步的话， 计算得到的value 会是个promise，而 watch 中的方法 是当成回调去执行的，不会影响对user watcher 的求值