从源码的角度分析vue computed的依赖搜集

vue 源码版本是2612

很多介绍vue源码的文章对computed怎么计算值讲的很清楚，但是对computed 怎么搜集到依赖它的视图渲染watcher，以及怎么去通知对应的渲染watcher去更新讲解的很模糊或者干脆一笔带过。这篇文章主要讲解——computed watcher是怎么搜集到订阅它的渲染watcher。

文件在src/core/instance/statejs

当组件读取computed a的值的时候会执行 computedGetter函数，先是通过

计算出computed函数的值，然后通过

进行依赖搜集。

Deptarget指向当前组件的渲染watcher，进入watcherdepend()看看是怎么进行依赖搜集的

文件位于 src/core/observer/watcherjs

第一个问题：thisdeps的赋值

是在cleanupDeps函数中执行thisdeps = thisnewDeps，所以要看cleanupDeps在哪里被调用的，以及thisnewDeps中的值是哪里产生的

get函数是在computed 通过watcherevaluate()计算值的时候被调用的，讲解下这个函数的核心 *** 作

这个this是计算属性的watcher，调用depjs中的

作用是放到栈顶，同时将计算属性的watcher赋值给Deptaget

会调用 计算属性a的函数

由于引用到了i，所以会触发i的get 函数，就会调用depdepend()，实际上是i的依赖搜集，这里的dep对象属于i

depdepend() 位于src/core/observer/depjs

这里的Deptarget就是上面保存的computed watcher实例，会执行watcher中的addDep，这里的this就是i的dep实例

文件位于 src/core/observer/watcherjs

做了两件事

把栈顶的watcherd出，改变Deptarget的指向，此时指向组件的渲染watcher

这一步就是 将thisnewDeps的值赋给thisdeps，此时thisdeps中的数组中的对象其实就是i的dep实例

再回到 watcherdepend()

thisdeps[i]depend() 这里就是执行

此时Deptarget是组件的渲染watcher，所以实现的逻辑是组件渲染watcher调用addDep(this)，其实就是持有i的dep，最终被i搜集到依赖。

转了这么大一圈，实际上是为了让组件的watcher被计算属性中引用的data变量搜集到，这也不难理解，既然组件依赖computed的变化，当然也依赖computed中的值的变化，示例中computed中的值变化来自于i的变化，所以当i变化时，就让去通知计算属性的watcher去重新计算，通知组件watcher重新渲染。

对于data中变量的响应式原理和依赖搜集、派发更新可以参考我的这篇文章

从源码的角度分析Vue视图更新和nexttick机制

参考：

>

以上就是关于从源码的角度分析vue computed的依赖搜集全部的内容，包括:从源码的角度分析vue computed的依赖搜集、vue源码中的createElement、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！