阐述 Vue 3 的响应式系统原理（Proxy），并分析其如何解决 Vue 2 中 `Object.defineProperty` 的局限性。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是你们的老朋友，今天咱们来聊聊 Vue 3 的响应式系统，这可是 Vue 3 相对于 Vue 2 最大的升级之一。说白了，它就是让数据变化的时候，界面也能跟着动起来的魔法。

开场白：响应式的“心跳”

想象一下，你正在做一个在线商店。当用户点击“添加到购物车”按钮时，购物车里的商品数量必须立刻更新显示在界面上，对吧？这就是响应式的力量。Vue 的响应式系统就像一个“心跳”，它时刻监听着数据的变化，一旦发现数据有变动，就立刻通知相关的组件去更新。

Vue 2 的“老办法”：Object.defineProperty

在 Vue 2 中，这个“心跳”是由 Object.defineProperty 创造的。这玩意儿是 JavaScript 提供的一个 API，可以让你精确地控制对象属性的行为，比如读取、写入等等。

简单来说，Vue 2 会遍历你的 data 对象，为每一个属性都设置 getter 和 setter。

Getter：当你访问这个属性时，getter 会被调用，Vue 就在这里偷偷地把你“登记”到依赖关系中，意思是说，这个组件依赖了这个数据。
Setter：当你修改这个属性时，setter 会被调用，Vue 就会通知所有依赖这个数据的组件去更新。

举个栗子：

let data = {
  name: '张三',
  age: 18
};

function observe(obj) {
  Object.keys(obj).forEach(key => {
    let internalValue = obj[key]; // 用一个内部变量保存属性的值

    Object.defineProperty(obj, key, {
      get() {
        console.log(`访问了属性 ${key}`);
        // 在这里收集依赖（先忽略具体实现）
        return internalValue;
      },
      set(newValue) {
        if (newValue !== internalValue) {
          console.log(`属性 ${key} 被修改为 ${newValue}`);
          internalValue = newValue;
          // 在这里通知更新（先忽略具体实现）
        }
      }
    });
  });
}

observe(data);

console.log(data.name); // 访问了属性 name  张三
data.age = 20;          // 属性 age 被修改为 20

这段代码模拟了 Vue 2 的部分实现，当访问 data.name 时，会触发 getter，当设置 data.age 时，会触发 setter。

Object.defineProperty 的局限性

Object.defineProperty 虽然能实现响应式，但它有一些明显的局限性：

无法监听对象属性的新增和删除： Object.defineProperty 只能监听对象已经存在的属性。如果你给对象新增一个属性，或者删除一个属性，Vue 2 是无法感知到的。你需要使用 Vue.set 和 Vue.delete 来触发响应式更新。
```
let data = { name: '张三' };
observe(data);

data.address = '北京'; // 新增属性，不会触发 setter
console.log(data.address); // undefined （因为没有被 observe）

Vue.set(data, 'address', '北京'); // 正确的做法
```
无法监听数组的变化： Object.defineProperty 只能监听数组的索引，而无法监听数组的 push、pop、shift、unshift、splice、sort、reverse 等方法。 Vue 2 通过重写这些方法来实现数组的响应式。
```
let arr = [1, 2, 3];
observe(arr);

arr.push(4); // 不会触发 setter
console.log(arr); // [1, 2, 3, 4]

// Vue 2 内部会重写这些方法，让它们在执行后触发更新
```
性能问题：如果你的 data 对象非常大，遍历所有属性并设置 getter 和 setter 会消耗一定的性能。

Vue 3 的“新武器”：Proxy

Vue 3 放弃了 Object.defineProperty，转而使用了 Proxy。Proxy 是 ES6 提供的一个强大的 API，它允许你创建一个对象的“代理”，你可以拦截对这个对象的所有操作，包括读取、写入、新增、删除等等。

Proxy 的优势

可以监听对象属性的新增和删除： Proxy 可以拦截 defineProperty、getOwnPropertyDescriptor、deleteProperty 等操作，这意味着它可以监听对象属性的新增和删除。
可以监听数组的变化： Proxy 可以直接监听数组的变化，不需要像 Vue 2 那样重写数组的方法。
性能更好： Proxy 是惰性监听的，只有当你访问对象的属性时，才会进行拦截。这避免了 Vue 2 中一次性遍历所有属性带来的性能问题。

Proxy 的基本用法

let data = {
  name: '张三',
  age: 18
};

const handler = {
  get(target, key, receiver) {
    console.log(`访问了属性 ${key}`);
    return Reflect.get(target, key, receiver); // 使用 Reflect 保持 this 指向
  },
  set(target, key, value, receiver) {
    console.log(`属性 ${key} 被修改为 ${value}`);
    const result = Reflect.set(target, key, value, receiver); // 使用 Reflect 保持 this 指向
    // 在这里通知更新
    return result; // 返回 true 表示设置成功
  },
  deleteProperty(target, key) {
      console.log(`属性 ${key} 被删除了`);
      return Reflect.deleteProperty(target, key);
  }
};

const proxy = new Proxy(data, handler);

console.log(proxy.name); // 访问了属性 name  张三
proxy.age = 20;          // 属性 age 被修改为 20
delete proxy.age;         // 属性 age 被删除了

这段代码创建了一个 Proxy 代理了 data 对象，当访问、修改、删除 data 对象的属性时，都会触发 handler 中对应的函数。

Vue 3 的响应式实现

Vue 3 的响应式系统比 Vue 2 更加复杂，它使用了 Proxy、Reflect、track、trigger 等概念。

reactive()：这是 Vue 3 中创建响应式对象的 API。它会返回一个 Proxy 对象，代理你的数据。

import { reactive } from 'vue';

const state = reactive({
  name: '张三',
  age: 18
});

console.log(state.name); // 张三
state.age = 20;          // 触发更新

Reflect： Reflect 是 ES6 提供的一个 API，它提供了一组与 Object 对象类似的方法，但是 Reflect 的方法更加规范，并且可以正确地处理 this 指向问题。在 Proxy 的 handler 中，我们通常会使用 Reflect 来调用原始对象的方法。
track()：这个函数用于收集依赖。当你在组件中访问响应式数据时，track() 会被调用，它会将当前组件“登记”到这个数据的依赖列表中。
trigger()：这个函数用于触发更新。当响应式数据被修改时，trigger() 会被调用，它会遍历这个数据的依赖列表，并通知所有依赖这个数据的组件去更新。

精简版 Vue 3 响应式代码

下面是一个非常简化的 Vue 3 响应式系统的实现：

const targetMap = new WeakMap(); // 存储 target 和 dep 的关系
let activeEffect = null; // 当前激活的 effect

function track(target, key) {
  if (!activeEffect) return; // 没有 effect 依赖，直接返回

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }

  dep.add(activeEffect); // 添加依赖
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return; // 没有依赖，直接返回

  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => {
      effect(); // 执行 effect
    });
  }
}

function reactive(target) {
  const handler = {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key); // 收集依赖
      return result;
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return result;
    }
  };

  return new Proxy(target, handler);
}

function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次
  activeEffect = null;
}

// 例子
const state = reactive({
  name: '张三',
  age: 18
});

effect(() => {
  console.log(`姓名：${state.name}，年龄：${state.age}`);
});

state.name = '李四'; // 触发更新
state.age = 20;          // 触发更新

这段代码模拟了 Vue 3 响应式系统的核心逻辑：

targetMap 用于存储对象和其依赖关系。
activeEffect 用于记录当前激活的 effect。
track() 用于收集依赖。
trigger() 用于触发更新。
reactive() 用于创建响应式对象。
effect() 用于创建一个副作用函数，当依赖的数据发生变化时，这个函数会被重新执行。

Vue 2 和 Vue 3 响应式系统的对比

特性	Vue 2	Vue 3
实现方式	`Object.defineProperty`	`Proxy`
监听新增属性	不支持，需要使用 `Vue.set`	支持
监听删除属性	不支持，需要使用 `Vue.delete`	支持
监听数组变化	重写数组方法	直接监听
性能	初始遍历所有属性，可能存在性能问题	惰性监听，性能更好
兼容性	兼容性好，支持 IE9+	兼容性较差，不支持 IE

Proxy 的兼容性问题

Proxy 的兼容性不如 Object.defineProperty，它不支持 IE 浏览器。如果你的项目需要兼容 IE 浏览器，你需要使用 polyfill 来模拟 Proxy 的功能。 Vue 3 官方已经提供了相应的解决方案。

总结

Vue 3 使用 Proxy 代替 Object.defineProperty，解决了 Vue 2 中无法监听对象属性的新增和删除、无法直接监听数组变化等问题，并且在性能方面也有所提升。虽然 Proxy 的兼容性不如 Object.defineProperty，但 Vue 3 官方提供了相应的解决方案。

希望今天的讲解能够帮助你更好地理解 Vue 3 的响应式系统。理解了这些，你就能更好地使用 Vue 3，写出更高效、更灵活的代码。

最后，记住，技术在不断发展，学习永无止境。祝大家编程愉快！

发表回复 取消回复

发表回复取消回复