Vue 源码剖析：订阅者的响应机制

在上篇专栏中，我们介绍了发布者是如何收集订阅者（Watcher），本篇专栏将详细介绍发布者发生变化后，如何通知订阅者，而订阅者是如何响应的。

在 Vue 中，发布者一般是数据，当数据发生变化了会触发数据 setter 函数，其定义在 defineReactive 函数中。可以发现，在 setter 函数中，除了直接修改数据的值，还会有如下操作：

1. 触发 update 函数。
2. 调用 notify 函数通知所有订阅者。

update 函数的功能比较简单，主要负责重新计算所有依赖该数据的 Watcher。而 notify 函数则会遍历该数据的所有订阅者，并调用订阅者的 update 函数。

订阅者的 update 函数中，主要会做以下几件事：

1. 调用 getter 函数获取最新的数据值。
2. 调用 run 函数，执行 Watcher 的回调函数。

Getter 函数的作用是获取数据的最新值。因为在数据发生变化后，该数据的依赖者可能不只一个，所以需要先获取到最新值，然后再逐个通知依赖者。

Run 函数的作用是执行 Watcher 的回调函数。回调函数中通常会包含一些更新 UI 的操作。在数据发生变化后，需要通过回调函数来更新 UI，以保证 UI 与数据保持一致。

这就是 Vue 中订阅者响应机制的大致流程。通过这种机制，Vue 可以高效地更新 UI，而不用每次都重新渲染整个组件。

发布者（数据）

在 Vue 中，发布者一般是数据。当数据发生变化时，会触发数据 setter 函数，从而通知所有订阅者。

订阅者（Watcher）

订阅者是依赖于发布者（数据）的组件或属性。当发布者发生变化时，订阅者会被通知，并做出相应的响应。

更新函数（update）

更新函数负责重新计算所有依赖该数据的 Watcher。

通知函数（notify）

通知函数负责遍历该数据的所有订阅者，并调用订阅者的 update 函数。

Getter 函数

Getter 函数的作用是获取数据的最新值。

Run 函数

Run 函数的作用是执行 Watcher 的回调函数。

响应机制流程

1. 数据发生变化，触发数据 setter 函数。
2. 数据 setter 函数调用 update 函数。
3. update 函数重新计算所有依赖该数据的 Watcher。
4. update 函数调用 notify 函数通知所有订阅者。
5. notify 函数遍历该数据的所有订阅者，并调用订阅者的 update 函数。
6. 订阅者的 update 函数调用 getter 函数获取最新的数据值。
7. 订阅者的 update 函数调用 run 函数执行 Watcher 的回调函数。
8. 回调函数中通常会包含一些更新 UI 的操作。

以上就是 Vue 中订阅者响应机制的大致流程。通过这种机制，Vue 可以高效地更新 UI，而不用每次都重新渲染整个组件。