手撕 mini-vue 源码——实现 effect & reactive & track & trigger

前言

在上一篇文章中，我们对 mini-vue 的整体架构和实现原理进行了概述。我们了解到，mini-vue 的核心思想是将数据和视图分开，通过响应式系统来实现数据的变化能够驱动视图的更新。

在本篇文章中，我们将深入探讨 mini-vue 中的响应式系统，包括 effect、reactive、track 和 trigger 等关键概念的实现。通过对这些概念的理解，我们将更深入地了解 mini-vue 的工作原理，并为我们构建自己的响应式系统奠定坚实的基础。

响应式系统

effect

effect 是一个函数，它将被 mini-vue 跟踪，当 effect 中依赖的数据发生变化时，该函数就会被重新执行。effect 可以被视为一个观察者，它时刻关注着数据变化，并在数据变化时作出反应。

在 mini-vue 中，effect 可以通过调用 effect 函数来创建。如下面的代码所示：

const effect = effect(() => {
  console.log('effect triggered');
});

当这个 effect 被创建后，它就会被 mini-vue 跟踪。当 effect 中依赖的数据发生变化时，该 effect 就会被重新执行，并且控制台会打印出 "effect triggered"。

reactive

reactive 是一个函数，它可以将一个普通的 JavaScript 对象转换为一个响应式对象。当响应式对象中的数据发生变化时，所有依赖该数据的 effect 都会被重新执行。

在 mini-vue 中，reactive 可以通过调用 reactive 函数来创建。如下面的代码所示：

const state = reactive({
  count: 0
});

当 state 对象被创建后，它就会被 mini-vue 转换为一个响应式对象。当 state.count 的值发生变化时，所有依赖 state.count 的 effect 都会被重新执行。

track

track 是一个函数，它用于记录 effect 对数据的依赖关系。当 effect 被创建时，mini-vue 会调用 track 函数来记录 effect 对数据的依赖关系。当数据发生变化时，mini-vue 会调用 trigger 函数来通知所有依赖该数据的 effect。

在 mini-vue 中，track 函数通常是在 effect 函数内部被调用的。如下面的代码所示：

const effect = effect(() => {
  track(() => state.count);
  console.log('effect triggered');
});

当这个 effect 被创建时，mini-vue 会调用 track 函数来记录 effect 对 state.count 的依赖关系。当 state.count 的值发生变化时，mini-vue 会调用 trigger 函数来通知所有依赖 state.count 的 effect。

trigger

trigger 是一个函数，它用于通知所有依赖于数据的 effect。当数据发生变化时，mini-vue 会调用 trigger 函数来通知所有依赖该数据的 effect。

在 mini-vue 中，trigger 函数通常是在 set 函数内部被调用的。如下面的代码所示：

state.count++;
trigger(() => state.count);

当 state.count 的值发生变化时，mini-vue 会调用 trigger 函数来通知所有依赖 state.count 的 effect。

总结

在本文中，我们深入探讨了 mini-vue 中的响应式系统，包括 effect、reactive、track 和 trigger 等关键概念的实现。通过对这些概念的理解，我们将更深入地了解 mini-vue 的工作原理，并为我们构建自己的响应式系统奠定坚实的基础。

在下一篇文章中，我们将继续探索 mini-vue 的其他特性，敬请期待！