Vue3.0 揭秘：响应式原理剖析（runner 与 scheduler 深入解读）

runner 和 scheduler：携手实现响应式更新

在上一篇文章中，我们了解了 Vue3.0 响应式系统中 effect 的基本原理。effect 是响应式更新的起点，当我们调用 effect 方法时，Vue3.0 会创建一个 Watcher 实例，并将当前函数作为其回调函数。当响应式数据发生变化时，Watcher 会触发回调函数的执行，从而实现响应式更新。

在 effect 内部，有一个至关重要的函数：runner。runner 的职责是执行 effect 的回调函数。当 Watcher 触发回调函数时，runner 会被调用，并依次执行回调函数中的所有操作。

runner 的实现非常简单，它本质上就是一个循环。在循环中，runner 会依次执行回调函数中的所有操作。如果在执行过程中遇到异步操作，runner 会将当前循环挂起，等到异步操作完成后再继续执行。

与 runner 相辅相成的是 scheduler。scheduler 的作用是调度 runner 的执行。当 Watcher 触发回调函数时，scheduler 会将 runner 加入到一个队列中。scheduler 会不断地从队列中取出 runner 并执行，从而实现响应式更新。

scheduler 的实现同样非常简单，它本质上就是一个队列。scheduler 会不断地从队列中取出 runner 并执行。如果在执行过程中遇到异步操作，scheduler 会将当前 runner 挂起，等到异步操作完成后再继续执行。

runner 和 scheduler 的协作

runner 和 scheduler 的协作是响应式更新的核心。当 Watcher 触发回调函数时，runner 会被调用，并依次执行回调函数中的所有操作。如果在执行过程中遇到异步操作，runner 会将当前循环挂起，等到异步操作完成后再继续执行。

scheduler 会不断地从队列中取出 runner 并执行。如果在执行过程中遇到异步操作，scheduler 会将当前 runner 挂起，等到异步操作完成后再继续执行。

这种协作机制确保了响应式更新的顺利进行。当响应式数据发生变化时，Watcher 会触发回调函数的执行。runner 会依次执行回调函数中的所有操作，并将异步操作挂起。scheduler 会不断地从队列中取出 runner 并执行，并在异步操作完成后继续执行。最终，响应式更新得以顺利完成。

结语

在本文中，我们深入剖析了 Vue3.0 响应式系统中 effect、runner 和 scheduler 的实现原理。我们了解到，effect 是响应式更新的起点，runner 负责执行 effect 的回调函数，而 scheduler 负责调度 runner 的执行。runner 和 scheduler 的协作确保了响应式更新的顺利进行。