Vue中的computed是如何实现的

Posted 2023-03-19

参考技术A 流程总结如下：

1、当组件初始化的时候，computed和data会分别建立各自的响应系统，Observer遍历data中每个属性设置get/set数据拦截。

2、初始化computed会调用initComputed函数

        ①    注册一个watcher实例，并实例化一个Dep消息订阅器用作后续收集依赖(比如渲染函数的watcher或者其他观察该计算属性变化的watcher)。

        ②    调用计算属性时会触发其Object.defineProperty的get访问器函数。

        ③    调用watcher.depend()方法向自身的消息订阅器dep的subs中添加其他属性的watcher。

        ④    调用watcher的evaluate方法(进而调用watcher的get方法)让自身成为其他watcher的消息订阅器的订阅   者，首先将watcher赋值给dep.target，然后执行getter求值函数，当访问求值函数里面的属性(比如来自data、props或其他computed)时，会同样触发它们的get访问器函数从而将该计算属性的watcher添加到求值函数中属性的watcher的消息订阅器dep中，当这些操作完成，最后关闭Dep.target赋值为null并返回求值函数结果。

3、当某个属性发生变化，触发set拦截函数，然后调用自身消息订阅器dep的notify方法，遍历当前dep中保存着所有订阅者watcher的subs数组，并逐个调用watcher的update方法，完成响应更新。

        

vue 如何给computed一个默认值

参考技术A computed是计算属性，是通过其它属性计算而来的结果。如果需要给默认值，那么就写一个判断语句，当正常逻辑返回的结果为空值时，返回你给的默认值即可。
这样讲不知道你明不明白