vue3源码学习-6-调度器

date

Apr 7, 2023 06:50 AM

type

status

slug

summary

前言

经过第5章对于分支切换的操作之后，vue的effect源码就具有了收集需要的依赖，对于改变不必要的数据，不会触发依赖的更新。那么今天就要实现vue3的调度器代码，之前effect只能同步运行代码，无法对于异步操作进行数据更新。官方的写法是什么样子呢?

上面的代码最后只会渲染stage.age=5000这个样子。并且还具有了可以手动停止依赖的触发的操作stop()

编写stop()函数

首先，先完成能手动停止依赖的和触发。那么我就要有一个stop函数来完成关闭操作，之前通过run里面的函数渲染，使得属性触发了get操作。通过get函数里面编写的track函数，完成了依赖收集。然后通过trigger里面的依赖记录重新触发函数。在第5篇文章中，完成了依赖每次先清空再收集的函数，那么stop不就可以直接通过调用清空依赖，来达到停止触发的操作。同时把active设置为false，来关闭函数的更新。所以stop函数如下编写了。

同样的effect函数也要做相应的修改，抛出当前的runner对象，然后通过这个对象上的stop来操作停止命令。

这样就可以在拿到effect到返回函数之后，通过runner.effect.stop()来手动停止执行。