手写mini-vue3实现reactivity模块中的reactive-effect

目录

• 概述
• reactive-effect 的实现
• 总结

概述

在前端开发中，响应式编程是一种非常重要的技术，它可以极大地简化数据更新和视图渲染的流程。在Vue3中，reactivity模块提供了丰富的响应式特性，其中reactive-effect是一个非常重要的概念。reactive-effect允许我们定义一个函数，当被追踪的数据发生变化时，该函数会被自动调用。

reactive-effect 的实现

reactive-effect的实现需要经历如下步骤：

1. 定义一个reactive-effect函数，该函数接收一个需要被追踪的函数作为参数。
2. 将需要被追踪的函数包装成一个Effect实例，并将其添加到一个Effect集合中。
3. 当需要被追踪的数据发生变化时，触发所有Effect实例的更新。

下面，我们将详细介绍每个步骤的实现。

1. 定义reactive-effect函数

export function reactiveEffect(fn: () => any) {
  // 将需要被追踪的函数包装成一个Effect实例
  const effect = new Effect(fn);
  // 将Effect实例添加到Effect集合中
  trackEffects(effect);
  // 执行需要被追踪的函数
  effect.run();
}

2. 将需要被追踪的函数包装成Effect实例

class Effect {
  constructor(fn: () => any) {
    this.fn = fn;
    this.deps = [];
  }

  run() {
    // 将当前Effect实例添加到全局activeEffect集合中
    activeEffect = this;
    // 执行需要被追踪的函数
    this.fn();
    // 从全局activeEffect集合中移除当前Effect实例
    activeEffect = null;
  }

  addDep(dep: Dep) {
    // 将当前Dep实例添加到Effect实例的deps数组中
    this.deps.push(dep);
    // 将当前Effect实例添加到Dep实例的effects数组中
    dep.addEffect(this);
  }

  update() {
    // 执行需要被追踪的函数
    this.fn();
  }
}

3. 当需要被追踪的数据发生变化时，触发所有Effect实例的更新

export function trigger(target: object, key: string | symbol) {
  // 获取需要被追踪的数据对应的Dep实例
  const dep = getDep(target, key);
  // 调用Dep实例的notify方法，触发所有Effect实例的更新
  dep.notify();
}

总结

通过本文，我们详细介绍了手写mini-vue3中实现reactivity模块中的reactive-effect的步骤。我们从概述开始，介绍了reactive-effect的概念和重要性。然后，我们详细介绍了reactive-effect的实现，包括定义reactive-effect函数、将需要被追踪的函数包装成Effect实例，以及当需要被追踪的数据发生变化时，触发所有Effect实例的更新。最后，我们总结了本文的内容。希望本文对您有所帮助。