Vue3 Reactive响应式原理是什么

Vue3 的响应式系统是其核心特性之一，它使得开发者能够轻松地构建动态、交互式的用户界面。Vue3 的响应式系统基于 Proxy 和 Reflect，相比于 Vue2 的 Object.defineProperty，Vue3 的响应式系统更加高效和灵活。本文将深入探讨 Vue3 的响应式原理，帮助开发者更好地理解其内部机制。

1. 什么是响应式系统？

响应式系统是指当数据发生变化时，系统能够自动更新依赖于这些数据的视图或其他逻辑。在 Vue 中，响应式系统的主要作用是当数据发生变化时，自动更新 DOM，从而实现数据驱动的视图更新。

Vue3 的响应式系统通过 reactive 和 ref 两个核心 API 来实现。reactive 用于创建响应式对象，而 ref 用于创建响应式的基本数据类型。

2. Vue3 响应式系统的核心：Proxy

Vue3 的响应式系统基于 Proxy 对象。Proxy 是 ES6 引入的一个新特性，它可以拦截对目标对象的操作，从而实现自定义的行为。Vue3 利用 Proxy 来拦截对响应式对象的读取和修改操作，从而实现数据的响应式。

2.1 Proxy 的基本用法

Proxy 的基本语法如下：

const proxy = new Proxy(target, handler);

• target：要代理的目标对象。
• handler：一个对象，定义了拦截操作的行为。

handler 对象可以定义多个拦截操作，例如 get、set、deleteProperty 等。Vue3 主要使用了 get 和 set 两个拦截操作来实现响应式。

2.2 Vue3 中的 Proxy 应用

在 Vue3 中，reactive 函数用于创建一个响应式对象。它的实现大致如下：

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 拦截读取操作
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      // 拦截设置操作
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return result;
    },
  });
}

• track：用于收集依赖，当读取响应式对象的属性时，Vue 会记录当前正在执行的副作用函数（例如渲染函数），并将其与当前属性关联起来。
• trigger：用于触发更新，当修改响应式对象的属性时，Vue 会找到所有依赖于该属性的副作用函数，并重新执行它们。

2.3 Reflect 的作用

Reflect 是 ES6 引入的一个内置对象，它提供了一组与 Proxy 拦截操作相对应的方法。Reflect 方法的主要作用是简化 Proxy 的实现，并确保 Proxy 的行为与默认行为一致。

在 Vue3 中，Reflect 主要用于在 Proxy 的拦截操作中调用目标对象的默认行为。例如，Reflect.get 用于获取目标对象的属性值，Reflect.set 用于设置目标对象的属性值。

3. 依赖收集与触发更新

Vue3 的响应式系统通过依赖收集和触发更新来实现数据的响应式。依赖收集是指在读取响应式对象的属性时，Vue 会记录当前正在执行的副作用函数，并将其与当前属性关联起来。触发更新是指在修改响应式对象的属性时，Vue 会找到所有依赖于该属性的副作用函数，并重新执行它们。

3.1 依赖收集

在 Vue3 中，依赖收集是通过 track 函数实现的。track 函数的主要作用是将当前正在执行的副作用函数与当前属性关联起来。

let activeEffect;

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()));
    }
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = new Set()));
    }
    dep.add(activeEffect);
  }
}

• targetMap：一个全局的 WeakMap，用于存储每个响应式对象的依赖关系。
• activeEffect：当前正在执行的副作用函数。

当读取响应式对象的属性时，Vue 会调用 track 函数，将当前正在执行的副作用函数与当前属性关联起来。

3.2 触发更新

在 Vue3 中，触发更新是通过 trigger 函数实现的。trigger 函数的主要作用是找到所有依赖于当前属性的副作用函数，并重新执行它们。

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach((effect) => effect());
  }
}

当修改响应式对象的属性时，Vue 会调用 trigger 函数，找到所有依赖于该属性的副作用函数，并重新执行它们。

4. 副作用函数与 effect

在 Vue3 中，副作用函数是指那些依赖于响应式数据的函数，例如渲染函数、计算属性、侦听器等。Vue3 通过 effect 函数来管理副作用函数的执行。

4.1 effect 函数

effect 函数的主要作用是执行副作用函数，并在执行过程中收集依赖。

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

• activeEffect：当前正在执行的副作用函数。

当调用 effect 函数时，Vue 会将当前副作用函数设置为 activeEffect，然后执行该函数。在执行过程中，如果读取了响应式对象的属性，Vue 会调用 track 函数，将当前副作用函数与当前属性关联起来。

4.2 副作用函数的重新执行

当响应式对象的属性发生变化时，Vue 会调用 trigger 函数，找到所有依赖于该属性的副作用函数，并重新执行它们。这个过程是通过 effect 函数实现的。

effect(() => {
  console.log(state.count);
});

在上面的例子中，effect 函数会执行传入的副作用函数，并在执行过程中收集依赖。当 state.count 发生变化时，Vue 会重新执行该副作用函数。

5. ref 与 reactive 的区别

在 Vue3 中，ref 和 reactive 都用于创建响应式数据，但它们的使用场景和实现方式有所不同。

5.1 ref

ref 用于创建响应式的基本数据类型（例如 number、string、boolean 等）。ref 的实现基于 reactive，它会将基本数据类型包装成一个对象，然后使用 reactive 创建响应式对象。

function ref(value) {
  return reactive({
    value,
  });
}

• ref 返回的对象包含一个 value 属性，该属性是响应式的。

5.2 reactive

reactive 用于创建响应式的对象。它的实现基于 Proxy，可以拦截对目标对象的读取和修改操作。

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key);
      return result;
    },
  });
}

• reactive 返回的对象是响应式的，可以直接访问和修改其属性。

5.3 使用场景

• ref 适用于基本数据类型的响应式处理，例如 number、string、boolean 等。
• reactive 适用于对象的响应式处理，例如 Object、Array 等。

6. 总结

Vue3 的响应式系统基于 Proxy 和 Reflect，通过依赖收集和触发更新来实现数据的响应式。reactive 和 ref 是 Vue3 中用于创建响应式数据的两个核心 API，它们分别适用于对象和基本数据类型的响应式处理。

通过深入理解 Vue3 的响应式原理，开发者可以更好地利用 Vue3 的响应式系统，构建高效、灵活的应用程序。