Vue3源码系列之computed的实现

godfly
201 阅读1分钟

第一步

src源目录下创建computed.ts

导出computed函数，并对参数进行判断

Image.png

如果是个函数，直接赋值给getter，否则分别取参数get和set赋值给getter和setter

最后返回一个ComputedRefImpl类实例

Image.png

第二步

创建一个ComputedRefImpl，接收getter和setter

做一个标识_dirty，默认取值时不用缓存

Image.png

第三步

计算属性默认会产生一个effect，在constructor生成，将getter传入

Image.png

get里

Image.png

注：第一次取值的时候才会重新去计算，第二次取就会取缓存里的

当修改值的时候我们还需要把_dirty改回true，在创建effect的时候传入scheduler，当被执行的时候判断一下当前的_dirty，如果是false，就改为true

Image.png

effects源码里，当值改变的时候，执行当前属性所收集effect，此时去判断当前执行的effect参数里是否有scheduler，如果有就执行scheduler

Image.png

第四步

计算属性get时也要收集依赖，vue2里计算属性是不具备的

Image.png

修改的时候调用trigger

Image.png

这样修改的时候也就可以通知父级的effect执行了，这种情况就是处理计算属性放到effect中

如果您觉得有所收获，麻烦动动小手点个攒，谢谢啦~ 预知后事如何，且听下回分解~

avatar
文章
阅读
粉丝