vue 中如何收集函数内部的依赖

190 阅读1分钟

阅读 vue文档 的一些想法,如果有错,还请麻烦指出。

前提1:

VUE 并不会收集函数内部所有依赖,仅会收集响应式对象属性

image.png

前提2:

需要被收集的函数都会由另外一个函数接收作为参数,如 watchEffect、computed 以及文档中提到的 whenDepsChange。

image.png

开始 (以文档中 whenDepsChange 为例)

image.png

第一步

在监听函数中创建一个 effect 函数。 effect 函数主要会做三件事情。
1.将自己赋值给变量 activeEffect
2.执行被监听函数 update。函数内部响应式数据会被触发 get 函数内部的 track 函数。

image.png
track 函数会将当前的 activeEffect 存入一个全局 weakMap 中。这样,当依赖的数据发生变化的时候,会触发 set 内部的 trigger 函数。

image.png trigger 函数将 effect 函数重新执行一遍,以达到监听函数内部依赖数据的目的。 3.将 activeEffect 置 null

第二步

执行 effect 函数,进行一次依赖收集。这也是为什么 watchEffect 相比于 watch 会在最开始的时候执行一次。

疑问

为什么是将 effect 函数存入 weakMap 中,而不是 update 函数,这样不是会导致数据更新的时候重新收集一遍依赖吗?还是说内部还有其他复杂的逻辑只是在文档中被省略了,望知道的大佬解释一下。