还原Vue3 Reactivity精髓：从头剖析响应式原理并亲手实践

前端

2024-01-28 09:55:17

掌握Vue3响应式系统的精髓：动手构建一个极简响应式系统

前言

Vue3的响应式系统是一个强大的工具，它赋予了应用程序高效、动态地跟踪和响应数据更改的能力。在这篇文章中，我们将深入探索Vue3响应式系统的核心原理，并逐步指导您动手构建一个极简响应式系统，以巩固您的理解。

Vue3响应式系统的运作方式

Vue3响应式系统的工作原理是通过以下几个关键步骤：

数据存储： 响应式数据存储在特殊的观察者对象中，这些对象负责跟踪对数据的任何更改。
依赖收集： 当您访问响应式数据时，系统会自动收集依赖于该数据的函数，即这些函数在数据发生更改时需要重新执行。
触发更新： 当响应式数据发生更改时，观察者对象会触发依赖函数的重新执行，从而更新应用程序的状态。

动手实现一个极简响应式系统

为了深入理解Vue3响应式系统，让我们动手实现一个极简响应式系统。我们将使用以下基本步骤：

定义工具函数： 我们将创建一些实用函数，例如判断对象是否为对象、是否为响应式以及比较两个值是否发生更改。
存储数据： 我们将使用一个WeakMap来存储响应式数据及其对应的观察者对象。
实现主要逻辑： 我们将编写三个核心函数——observe、track和trigger——来模拟Vue3响应式系统的工作方式。

完整代码示例：

// 工具函数
const isObject = (val) => typeof val === 'object' && val !== null;
const isReactive = (value) => value && value.__ob__;
const hasChanged = (oldValue, newValue) => !Object.is(oldValue, newValue);

// 数据存储
const targetMap = new WeakMap();
const effectStack = [];
const data = { name: 'jack', age: 20 };

// 核心逻辑
const observe = (obj) => {
  if (!isObject(obj)) return obj;
  if (isReactive(obj)) return obj;
  const ob = { value: obj, dep: new Set(), keys: [] };
  targetMap.set(obj, ob);
  return ob.value;
};
const track = (obj, key) => {
  if (!effectStack.length) return;
  const ob = targetMap.get(obj);
  if (!ob) return;
  const dep = ob.dep;
  dep.add(effectStack[0]);
};
const trigger = (obj, key, value) => {
  const ob = targetMap.get(obj);
  if (!ob) return;
  const dep = ob.dep;
  dep.forEach((effect) => effect());
};
const effect = (fn) => {
  effectStack.push(fn);
  fn();
  effectStack.pop();
};

用法示例：

const vue = {
  data: observe({ name: 'jack', age: 20 }),
  addAge() { this.data.age++; },
};
const render = () => console.log(vue.data.age);
effect(render);
vue.addAge(); // 输出: 21