初探 Vue3 源码，打造简易版 reactivity

前言

响应式系统是 Vue.js 框架的核心，它使 Vue.js 能够高效地追踪数据的变化并更新 UI。在 Vue3 中，reactivity 系统得到了重写，引入了新的实现方式。

Vue3 的 reactivity 与 Vue2 的 Vue.observable 的区别

在 Vue2 中，Vue.observable 是一个全局 API，用于将一个普通对象转换成响应式对象。而在 Vue3 中，reactivity 系统采用了更加细粒度的设计，它可以对单个属性进行响应式处理。这意味着，你不再需要显式地调用 Vue.observable 来让一个对象变成响应式对象，而是可以通过直接设置对象的属性来实现响应式。

深入理解 Vue3 reactivity 的实现原理

Vue3 的 reactivity 系统是如何实现的呢？它主要依靠 Proxy 和 Object.defineProperty 这两个底层 API。

Proxy

Proxy 是 JavaScript 中的一个新特性，它可以让你对一个对象进行拦截，从而实现各种自定义行为。在 Vue3 中，Proxy 被用来拦截对象的属性访问和设置操作。当一个对象的属性被访问或设置时，Proxy 会触发一个回调函数，在这个回调函数中，我们可以执行一些自定义的操作，例如将新的值设置到对象上。

Object.defineProperty

Object.defineProperty 是另一个 JavaScript 中的 API，它可以用来定义一个对象的属性的特性。在 Vue3 中，Object.defineProperty 被用来定义对象的属性的 setter 和 getter 函数。当一个对象的属性被访问时，getter 函数会被调用，当一个对象的属性被设置时，setter 函数会被调用。

如何利用 Vue3 reactivity 系统实现简易版 reactivity

现在，让我们动手实现一个简易版的 reactivity 系统。

定义一个 Reactivity 类

首先，我们需要定义一个 Reactivity 类，这个类将用于包装普通对象，并使其变成响应式对象。

class Reactivity {
  constructor(obj) {
    this.obj = obj;
    this.proxy = new Proxy(obj, {
      get: (target, property) => {
        console.log(`Getting property "${property}" from object.`);
        return target[property];
      },
      set: (target, property, value) => {
        console.log(`Setting property "${property}" of object to "${value}".`);
        target[property] = value;
        return true;
      }
    });
  }
}

使用 Reactivity 类包装对象

接下来，我们可以使用 Reactivity 类来包装一个普通对象。

const obj = {
  name: 'John',
  age: 30
};

const reactivity = new Reactivity(obj);

const proxy = reactivity.proxy;

现在，proxy 就变成了一个响应式对象。当我们访问或设置 proxy 的属性时，Reactivity 类中的回调函数就会被触发，并执行相应的操作。

结语

通过本文，我们对 Vue3 的 reactivity 系统有了初步的了解，并实现了一个简易版的 reactivity 系统。希望这些内容对你有帮助。