Vue 2 和 Vue 3 的响应式原理有何不同？Vue 3 的 Proxy 相对于 Vue 2 的 Object.defineProperty 有何优势？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，掌声在哪里？欢迎来到今天的“Vue响应式原理大揭秘”讲座！我是今天的导游，带大家一起穿越Vue 2和Vue 3的响应式迷宫，看看它们到底有什么不一样，以及为什么Vue 3的Proxy能让Vue 2的Object.defineProperty甘拜下风。

准备好了吗？系好安全带，发车！

一、Vue 2：侦测变化的“老侦探” Object.defineProperty

在Vue 2的世界里，要让数据拥有“感知变化”的能力，就得依靠Object.defineProperty这位老侦探。想象一下，你有一栋房子（你的data对象），你想知道里面任何东西被移动、替换或者修改。 Object.defineProperty就像是在每个房间里都安装了监控摄像头（getter和setter）。

1.1 监控是如何工作的？

Getter（获取器）： 当你读取data中的某个属性时，getter就会被触发。Vue会记录下谁（组件）读取了这个属性，并把它添加到“依赖”列表中。就像侦探记录下谁进过这个房间。
Setter（设置器）： 当你修改data中的某个属性时，setter就会被触发。Vue会通知所有依赖于这个属性的组件进行更新。就像侦探发现房间里的东西被移动了，然后通知所有相关人员。

1.2 代码示例：

function defineReactive(obj, key, val) {
  // 递归地监听val，如果val也是对象，也需要进行响应式处理
  observe(val);

  Object.defineProperty(obj, key, {
    enumerable: true, // 可枚举
    configurable: true, // 可配置
    get: function reactiveGetter() {
      // 收集依赖：将读取这个属性的Watcher添加到依赖列表中
      console.log(`正在获取 ${key} 的值：${val}`);
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      console.log(`正在设置 ${key} 的值为：${newVal}`);
      val = newVal;
      // 通知更新：通知所有依赖于这个属性的Watcher
      // 这里简化了，实际需要通知Watcher
    }
  });
}

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return;
  }
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key]);
  });
}

const data = {
  name: 'Vue 2',
  age: 5,
  address: {
    city: 'Anywhere'
  }
};

observe(data);

console.log(data.name); // 触发getter
data.name = 'Vue Two'; // 触发setter

data.address.city = 'Somewhere'; // 无法检测到

1.3 Object.defineProperty 的缺陷：

虽然Object.defineProperty功不可没，但它也有一些难以克服的缺陷：

无法监听对象的新增属性： Vue 2 无法检测到对象新增的属性。你必须使用Vue.set或者this.$set来手动触发更新。
无法监听数组的变化： 虽然Vue 2 劫持了数组的一些方法（push, pop, shift, unshift, splice, sort, reverse），但对于直接通过索引修改数组元素（arr[index] = newValue）或者修改数组的length，Vue 2 依然无法检测到。
性能问题： 需要深度遍历对象，为每个属性都添加getter和setter，如果对象层级很深，属性很多，性能会受到影响。

二、Vue 3：Proxy 这个“超级保安”

Vue 3 引入了Proxy，就像给你的房子请了一个超级保安。这个保安不需要在每个房间安装摄像头，他只需要站在门口，就能监控到任何进出房间的人和发生的任何事情。

2.1 Proxy 的工作原理：

Proxy 允许你创建一个对象的“代理”。你可以拦截对这个对象的所有操作，包括读取、写入、删除属性等。

handler： Proxy 接收一个handler对象，这个对象定义了各种拦截行为，例如get（读取属性）、set（设置属性）、deleteProperty（删除属性）等。

2.2 代码示例：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`正在获取 ${key} 的值：${target[key]}`);
      return Reflect.get(target, key, receiver); // 保持默认行为
    },
    set(target, key, value, receiver) {
      console.log(`正在设置 ${key} 的值为：${value}`);
      const result = Reflect.set(target, key, value, receiver); // 保持默认行为
      // 通知更新：这里简化了，实际需要通知Watcher
      return result; // set必须返回true
    },
    deleteProperty(target, key) {
      console.log(`正在删除 ${key} 属性`);
      const result = Reflect.deleteProperty(target, key); // 保持默认行为
      // 通知更新：这里简化了，实际需要通知Watcher
      return result; // deleteProperty必须返回true
    }
  });
}

const data = {
  name: 'Vue 3',
  age: 3,
  address: {
    city: 'Anywhere'
  }
};

const proxyData = reactive(data);

console.log(proxyData.name); // 触发get
proxyData.name = 'Vue Three'; // 触发set
delete proxyData.age; // 触发deleteProperty

proxyData.newProperty = 'Hello'; // 可以检测到新增属性
data.address.city = 'Somewhere'; // 无法检测到深层嵌套对象的变化，需要递归代理

2.3 Proxy 的优势：

Proxy 相对于Object.defineProperty，具有以下显著优势：

可以监听对象的新增/删除属性： Proxy 可以拦截ownKeys、getOwnPropertyDescriptor等操作，从而能够检测到对象新增或删除属性。
可以监听数组的变化： Proxy 可以拦截对数组的各种操作，包括通过索引修改数组元素和修改数组的length。
性能更好： Proxy 只需要代理对象本身，不需要深度遍历对象的每个属性，初始化的性能更好。只有在访问属性的时候才会触发相应的handler。
支持更多操作： Proxy 可以拦截更多的操作，例如has（判断对象是否拥有某个属性）、construct（构造函数）等。

三、Vue 3 的响应式系统：深入解析

Vue 3 的响应式系统不仅仅是使用了Proxy，而是在此基础上构建了一个更加强大和灵活的系统。它基于Proxy实现了以下核心功能：

Track（追踪）： 当读取响应式对象的属性时，Vue 3 会追踪这个操作，并记录下哪个 effect （可以理解为组件的渲染函数）依赖于这个属性。
Trigger（触发）： 当修改响应式对象的属性时，Vue 3 会触发所有依赖于这个属性的 effect，让它们重新执行。

3.1 核心数据结构：

Reactive Effect： 一个包含依赖追踪和触发机制的函数。当 effect 依赖的响应式数据发生变化时，它会被重新执行。
Dependency（依赖）： 一个 Set 集合，存储了所有依赖于某个响应式属性的 effect。
WeakMap： 用于存储对象到其属性的依赖关系的映射。例如，WeakMap<object, Map<string, Set<ReactiveEffect>>>，表示对象及其属性对应的依赖集合。

3.2 响应式流程：

创建响应式对象： 使用reactive函数将普通对象转换为响应式对象。reactive函数会使用Proxy来代理对象。
追踪依赖： 当组件渲染函数（也就是一个 effect）访问响应式对象的属性时，会触发Proxy的get拦截器。get拦截器会将当前的 effect 添加到该属性的依赖集合中。
触发更新： 当修改响应式对象的属性时，会触发Proxy的set拦截器。set拦截器会遍历该属性的依赖集合，并执行所有依赖于该属性的 effect，从而触发组件更新。

3.3 代码示例（简化版）：

// 全局变量，用于存储当前正在执行的 effect
let activeEffect = null;

// 依赖收集器
class Dep {
  constructor() {
    this.effects = new Set();
  }

  depend() {
    if (activeEffect) {
      this.effects.add(activeEffect);
    }
  }

  notify() {
    this.effects.forEach(effect => {
      effect();
    });
  }
}

// 响应式函数
function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      const dep = getDep(target, key);
      dep.depend(); // 收集依赖
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      const dep = getDep(target, key);
      const result = Reflect.set(target, key, value);
      dep.notify(); // 触发更新
      return result;
    }
  });
}

// effect 函数
function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次，触发依赖收集
  activeEffect = null;
}

// 存储对象及其属性对应的依赖集合
const targetMap = new WeakMap();

// 获取依赖集合
function getDep(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

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

  return dep;
}

// 示例
const data = reactive({ count: 0 });

effect(() => {
  console.log(`count is: ${data.count}`);
});

data.count++; // 触发更新

四、对比表格：Object.defineProperty vs. Proxy

为了更清晰地展示两者的区别，我们用一张表格来总结一下：

特性	Object.defineProperty	Proxy
监听新增/删除属性	无法直接监听，需要`Vue.set`或`this.$set`手动触发更新	可以直接监听
监听数组变化	只能监听部分数组方法，无法监听索引修改和length变化	可以监听所有数组操作
性能	需要深度遍历对象，初始化性能较差	只需代理对象本身，初始化性能较好，按需触发
拦截操作	只能拦截getter和setter	可以拦截更多操作，例如`has`、`deleteProperty`、`ownKeys`等
浏览器兼容性	兼容性更好，支持IE8+	兼容性较差，不支持IE
深层嵌套的对象	需要递归的遍历对象，性能差	需要递归代理，不然嵌套对象不是响应式的

五、Vue 3 响应式系统的优化

Vue 3 的响应式系统在性能方面做了很多优化：

Lazy Tracking（懒追踪）： 只有在组件真正需要使用某个响应式属性时，才会建立依赖关系。
Static Tree Hoisting（静态树提升）： 将静态节点提升到渲染函数之外，避免重复创建。
Patching Flags（补丁标志）： 在 Virtual DOM Diff 算法中，使用补丁标志来标记节点的变化类型，从而减少不必要的DOM操作。
ShapeFlags（形状标志）：ShapeFlags用于描述vnode的类型，例如元素、组件、文本等。通过ShapeFlags可以快速判断vnode的类型，从而优化渲染过程。
WeakMap优化依赖存储:使用WeakMap存储对象及其属性对应的依赖集合，可以避免内存泄漏。

六、Proxy 的兼容性问题

虽然Proxy有很多优点，但它也有一个致命的缺点：兼容性问题。Proxy 不支持IE浏览器。

为了解决兼容性问题，Vue 3 在不支持Proxy的浏览器上，会降级使用Object.defineProperty。但是，降级后的响应式系统会受到Object.defineProperty的限制，例如无法监听对象的新增属性。

七、总结

Vue 3 的响应式系统是Vue 2 的一次重大升级。Proxy 的引入解决了Object.defineProperty的诸多缺陷，让Vue 3 能够更高效、更灵活地追踪数据变化。

总而言之，Vue 3 的响应式系统就像一个升级版的超级保安，能够更全面、更智能地保护你的数据安全，让你的应用程序更加流畅和高效。

感谢大家的收看！希望今天的讲座能够帮助大家更好地理解Vue的响应式原理。下课！

发表回复 取消回复

发表回复取消回复