造轮子：亲手打造响应式系统

<--more-->

在探索了 Vue3 响应式的奥秘后，让我们亲手实践一下，实现一个简易的 reactivity 响应式系统，这样当我们修改数据时，就可以立即得到修改后的数据，感受响应式系统的神奇。

首先，我们需要创建一个名为 reactive 的函数，这个函数的作用是将原始数据转换为响应式数据，当原始数据发生变化时，响应式数据也会随之更新。

const reactive = (rawData) => {
  // TODO: 实现响应式系统
};

为了实现响应式系统，我们需要一个追踪系统来跟踪原始数据和响应式数据之间的依赖关系。当原始数据发生变化时，追踪系统会通知响应式数据进行更新。

追踪系统可以采用多种方式实现，比如使用 Map 来存储原始数据和响应式数据之间的依赖关系，或者使用 Proxy 来劫持原始数据的访问和修改操作。

这里我们使用 Proxy 来实现追踪系统，因为 Proxy 可以方便地劫持原始数据的访问和修改操作。

const reactive = (rawData) => {
  return new Proxy(rawData, {
    // TODO: 实现 Proxy 的 handler
  });
};

在 Proxy 的 handler 中，我们需要实现 get 和 set 两个方法来劫持原始数据的访问和修改操作。

const reactive = (rawData) => {
  return new Proxy(rawData, {
    get: (target, property) => {
      // TODO: 实现 get handler
    },
    set: (target, property, value) => {
      // TODO: 实现 set handler
    }
  });
};

在 get handler 中，我们需要检查原始数据和响应式数据之间的依赖关系，如果有依赖关系，则将响应式数据添加到依赖关系中。

const reactive = (rawData) => {
  return new Proxy(rawData, {
    get: (target, property) => {
      // 检查原始数据和响应式数据之间的依赖关系
      if (!dependenciesMap.has(target)) {
        dependenciesMap.set(target, new Set());
      }
      dependenciesMap.get(target).add(reactiveData);
      return target[property];
    },
    set: (target, property, value) => {
      // TODO: 实现 set handler
    }
  });
};

在 set handler 中，我们需要更新原始数据和响应式数据，并通知依赖关系中的响应式数据进行更新。

const reactive = (rawData) => {
  return new Proxy(rawData, {
    get: (target, property) => {
      // 检查原始数据和响应式数据之间的依赖关系
      if (!dependenciesMap.has(target)) {
        dependenciesMap.set(target, new Set());
      }
      dependenciesMap.get(target).add(reactiveData);
      return target[property];
    },
    set: (target, property, value) => {
      // 更新原始数据和响应式数据
      target[property] = value;
      // 通知依赖关系中的响应式数据进行更新
      dependenciesMap.get(target).forEach((reactiveData) => {
        reactiveData[property] = value;
      });
    }
  });
};

这样，我们就实现了简易的 reactivity 响应式系统。我们可以使用这个系统来实现简单的响应式应用，比如一个简单的计数器。

const rawData = {
  count: 0
};

const reactiveData = reactive(rawData);

const incrementButton = document.getElementById('increment-button');

incrementButton.addEventListener('click', () => {
  reactiveData.count++;
});

const countDisplay = document.getElementById('count-display');

countDisplay.textContent = reactiveData.count;

reactiveData.count++; // 响应式数据发生变化

当我们点击 incrementButton 按钮时，reactiveData.count 会自动增加，countDisplay 的文本内容也会随之更新。这说明我们的简易响应式系统工作正常。

希望这篇博文能帮助你更好地理解 Vue3 的响应式系统，也希望你能够亲手实现一个简易的响应式系统，感受响应式系统的神奇之处。