Vue3响应式原理Proxy的深度剖析

1. 前言

Vue3 作为 Vue 框架的最新版本，对响应式系统进行了全面升级，采用Proxy替代了 Vue2 中的Object.defineProperty，极大地提升了响应式的性能和灵活性。理解 Vue3 的响应式原理，不仅能帮助开发者编写出更高效、稳定的代码，还能在遇到问题时快速定位和解决。本文将深入剖析 Vue3 响应式原理，从Proxy的基础使用到副作用函数的触发机制逐步讲解。

2. Vue2 与 Vue3 响应式实现的差异

下面我会根据例子，来说明Vue2 与 Vue3 响应式实现的差异：

2.1. Vue2 响应式实现

在 Vue2 中，响应式系统通过Object.defineProperty来实现。Object.defineProperty是 JavaScript 的原生方法，它可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。Vue2 利用该方法将数据对象的每个属性转换为getter和setter，从而实现数据的劫持。当数据被读取时，触发getter进行依赖收集；当数据被修改时，触发setter通知相关的 Watcher 进行视图更新。

然而，这种实现方式存在一些局限性：

无法检测对象属性的新增和删除 ：因为在初始化时，Object.defineProperty已经对现有属性进行了劫持，新增或删除属性时，Vue2 无法自动进行响应式处理。
数组变异方法的处理 ：Vue2 对数组的部分变异方法（如push、pop等）进行了重写来实现响应式，但仍存在一些数组操作无法被检测到。
性能问题 ：在处理大量数据时，对每个属性都进行Object.defineProperty劫持会带来一定的性能开销。

2.2. Vue3 响应式实现

Vue3 采用Proxy来实现响应式系统。Proxy是 ES6 中新增的一个构造函数，用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。与Object.defineProperty相比，Proxy具有以下优势：

可拦截更多操作 ：Proxy可以拦截对象的 13 种操作，包括属性的读取、写入、删除、函数调用等，能够更全面地实现响应式。
对数组和对象操作无差别处理 ：Proxy可以统一处理对象和数组的操作，无需像 Vue2 那样对数组的部分方法进行特殊处理。
性能更优 ：Proxy是在对象的顶层进行拦截，而不是针对每个属性，在处理大量数据时性能表现更好。

3. Proxy 基础

下面是一些Proxy的语法和使用等等

3.1. Proxy 的基本语法

Proxy的构造函数接收两个参数：目标对象（被代理的对象）和处理程序对象（定义了拦截行为的对象）。其基本语法如下：

javascript 复制代码

const target = {
  name: 'Vue3',
  version: '3.0'
};

const handler = {
  get(target, property) {
    console.log(`获取属性 ${property}`);
    return Reflect.get(target, property);
  },
  set(target, property, value) {
    console.log(`设置属性 ${property} 为 ${value}`);
    return Reflect.set(target, property, value);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name);
proxy.version = '3.2';

在上述代码中，我们创建了一个Proxy实例proxy，它代理了target对象。当访问proxy.name时，会触发handler中的get方法；当修改proxy.version时，会触发handler中的set方法。Reflect对象提供了与Proxy对应的方法，用于执行默认的操作，确保在拦截操作后，仍然能够执行正常的对象操作。

3.2. Proxy 的常见拦截方法

除了get和set方法外，Proxy还有许多其他拦截方法，以下是一些常见的拦截方法及其用途：

has(target, property)：拦截in操作符，当使用in操作符检查属性是否存在于对象中时触发。
deleteProperty(target, property)：拦截delete操作符，当使用delete操作符删除对象属性时触发。
ownKeys(target)：拦截Object.keys()、for...in循环等获取对象自身属性键的操作。
apply(target, thisArg, argumentsList)：拦截函数调用操作，当调用代理对象作为函数时触发。

4. Vue3 响应式核心-副作用函数

在 Vue3 的响应式系统中，副作用函数是一个非常重要的概念。副作用函数是指会产生副作用的函数，即函数的执行会对外部状态产生影响，比如修改全局变量、更新 DOM 等。在 Vue 中，组件的渲染函数就是一个典型的副作用函数，因为它会根据数据的变化来更新 DOM。

4.1. 副作用函数的收集与触发

Vue3 通过effect函数来注册副作用函数。effect函数接收一个回调函数作为参数，该回调函数就是我们要注册的副作用函数。当回调函数中访问了响应式数据时，Vue3 会自动进行依赖收集，将该副作用函数与访问的数据建立关联。

以下是一个简单的示例：

javascript 复制代码

import { reactive, effect } from 'vue';

const state = reactive({
  count: 0
});

let sum = 0;
effect(() => {
  sum = state.count + 1;
  console.log(sum);
});

state.count++;

在上述代码中，我们使用reactive函数创建了一个响应式对象state，然后通过effect函数注册了一个副作用函数。在副作用函数中，我们访问了state.count，此时 Vue3 会自动将该副作用函数与state.count建立依赖关系。当我们修改state.count的值时，Vue3 会检测到数据变化，触发与之关联的副作用函数重新执行，从而更新sum的值并输出。

4.2. 依赖收集的实现

在 Vue3 中，依赖收集是通过targetMap和activeEffect来实现的。targetMap是一个全局的 WeakMap，它的键是响应式对象，值是一个 Map，这个 Map 的键是属性名，值是一个 Set，Set 中存储了所有依赖该属性的副作用函数。activeEffect用于存储当前正在执行的副作用函数。

以下是简化后的依赖收集代码：

javascript 复制代码

const targetMap = new WeakMap();
let activeEffect;

function track(target, key) {
  if (!activeEffect) return;
  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);
}

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

在track函数中，当访问响应式数据时，会将当前的副作用函数activeEffect添加到对应的依赖 Set 中。在trigger函数中，当数据发生变化时，会取出与该数据关联的所有副作用函数并执行，从而实现视图的更新。

5. Vue3 响应式的实现流程

在 Vue3 中，可以使用reactive函数和ref函数来创建响应式对象。reactive函数用于将普通对象转换为响应式对象，而ref函数用于创建一个包含响应式数据的引用对象，适用于基本数据类型和需要独立追踪的响应式数据。

创建响应式对象

javascript 复制代码

import { reactive, ref } from 'vue';

// 使用reactive创建响应式对象
const obj = reactive({
  name: 'Vue3',
  age: 1
});

// 使用ref创建响应式引用对象
const num = ref(0);

依赖收集与更新

当组件渲染时，会执行组件的渲染函数，在渲染函数中访问响应式数据。此时，Vue3 会通过track函数进行依赖收集，将组件的渲染函数（副作用函数）与访问的响应式数据建立关联。

当响应式数据发生变化时，Vue3 会通过trigger函数触发与之关联的副作用函数重新执行，从而重新渲染组件，实现视图的更新。

本次分享就到这儿啦，我是鹏多多，如果看了觉得有帮助的，欢迎点赞关注评论，在此谢过道友；

往期文章