手写实现最简易的 mini-vue3：探秘响应式系统背后的奥秘

前端

2023-12-15 02:57:53

响应式系统：让数据与视图动态联动

在现代 Web 开发中，响应式系统已成为不可或缺的关键技术。它使应用程序能够自动更新视图，以响应数据的变化，从而提供流畅的用户体验和简化开发流程。

在 Vue3 中，响应式系统是其核心功能之一，它通过响应式对象和副作用函数实现。

响应式对象：数据的眼睛

响应式对象是 Vue3 用来跟踪数据变化的核心对象。当一个响应式对象的属性发生改变时，Vue3 就会自动检测到这一变化，并触发相应的更新操作。

响应式对象是如何实现的呢？在 Vue3 中，响应式对象本质上是使用 Proxy 对象包装的普通 JavaScript 对象。Proxy 对象可以拦截对对象的操作，当对象的属性被访问或修改时，Vue3 就会收到通知，从而实现响应式更新。

副作用函数：数据改变的守护者

副作用函数是一种特殊类型的函数，它会在执行过程中改变其外部环境。在 Vue3 中，副作用函数主要用于响应响应式对象的属性变化。

当一个响应式对象的属性发生改变时，Vue3 会调用相关的副作用函数。这些副作用函数可以执行各种操作，如更新视图、触发事件或执行其他计算。

副作用函数通常采用 effect() 函数的形式，它接收一个回调函数作为参数。当响应式对象的属性发生改变时，effect() 函数就会调用该回调函数，从而执行副作用操作。

手写 mini-vue3：揭开响应式系统的面紗

为了更深入地理解响应式系统，我们可以尝试自己手写一个最简易的 mini-vue3。

响应式对象

class ReactiveObject {
  constructor(obj) {
    this.value = obj;
    this.observers = []; // 观察者数组，用来存储副作用函数
    this.proxy = new Proxy(this.value, {
      get: (target, prop) => {
        this.track(target, prop); // 追踪依赖
        return target[prop];
      },
      set: (target, prop, newValue) => {
        target[prop] = newValue;
        this.trigger(target, prop); // 触发更新
        return true;
      },
    });
  }

  // 追踪依赖，建立响应式对象和副作用函数之间的联系
  track(target, prop) {
    this.observers.push({ target, prop });
  }

  // 触发更新，当响应式对象属性改变时通知副作用函数执行
  trigger(target, prop) {
    this.observers.forEach((observer) => {
      if (observer.target === target && observer.prop === prop) {
        observer.effect(); // 执行副作用函数
      }
    });
  }
}

副作用函数

const effect = (fn) => {
  // 当副作用函数执行时，我们认为它依赖于当前响应式对象的所有属性
  currentReactiveObject.observers.push({
    target: currentReactiveObject,
    prop: undefined, // 依赖于所有属性
    effect: fn,
  });

  fn(); // 立即执行副作用函数，建立依赖
};

手写 mini-vue3

// 创建响应式对象
const obj = new ReactiveObject({ count: 0 });

// 定义副作用函数，当 count 改变时更新视图
const effect = () => {
  console.log(`count is now ${obj.value.count}`);
};

// 触发副作用函数
effect();

// 改变 count 的值，触发响应式更新
obj.value.count++; // 输出："count is now 1"
obj.value.count++; // 输出："count is now 2"