2025-08-21 模拟面试（五）

一、 JavaScript 核心 & 深度原理

1. Vue 3 的响应式系统基于 Proxy 重构，请对比 Vue 2 的 Object.defineProperty 实现，分析 Proxy 的优势与局限性。

一、Proxy 的核心优势

Vue3 使用 Proxy 重构了响应式系统，带来了革命性的提升，主要体现在以下几个方面：

1. 对对象的全面拦截能力

   1. Vue2（Object.DefineProperty）：只能拦截对象属性的 get 和 set。它需要递归遍历对象的所有属性，并使用 getter/setter 替换它们。这就意味着：
      1. 无法检测属性的新增或删除，这就是为什么需要 Vue.set 和 Vue.delete 的根本原因
      2. 初始化阶段需要递归遍历，对于复杂嵌套对象，初始化性能开销比较大
   2. Vue3（Proxy）：Proxy 是对象级别的代理。它创建一个对象的包装器，可以拦截对这个对象的几乎所有操作，包括：
      1. 属性访问（get）
      2. 属性赋值，新增（set）
      3. 属性删除（deleteProperty）
      4. in 操作符（has）
      5. Object.keys()等方法
      6. 优势体现在无需初始化就循环递归所有属性，即可实现“按需代理”。同时也不需要 Vue.set 等方法。用户直接操作对象，开发体验更佳

2. 对数组的完美支持

   1. Vue 2： 由于 Object.defineProperty 的限制，Vue 2 需要重写数组的 7 个变更方法（push, pop, shift, unshift, splice, sort, reverse）来实现响应式。这导致：
      1. 通过索引直接设置项 (arr[index] = newValue) 不是响应式的。
      2. 修改数组的 length 属性也不是响应式的。
      3. 重写方法是一种 Hack，在底层数组和响应式系统之间增加了复杂性。
   2. Vue 3： Proxy 可以完美地拦截对数组的任何操作，包括：
      1. 基于索引的赋值 (arr[0] = 1)
      2. 修改 length (arr.length = 0)
      3. 直接调用 push, pop 等方法
      4. 优势体现： 数组的行为和普通数组完全一致，无需任何特殊 API 或注意事项，实现了“透明的响应式”。

3. 性能与实现优化

   1. 初始化性能： Proxy 无需在初始化时递归转换所有属性，延迟了代理的创建（只在真正访问时才会递归代理嵌套对象），这对于大型对象来说，初始渲染速度更快。
   2. 内存开销： Proxy 对象本身比被代理对象更耗内存，但由于避免了在初始化时为每个属性创建 getter/setter，并且在组件实例销毁时更容易被垃圾回收，整体内存管理更高效。
   3. 编译时优化： Vue 3 的响应式系统与新的编译时优化（如 Block Tree、PatchFlags）结合得更紧密。编译器可以静态分析模板，对动态绑定的部分生成更优化的代码，而 Proxy 提供的强大拦截能力是这些优化的基础。

二、Proxy 的局限性

Proxy 是 ES6 引入的特性，无法被 polyfill（因为它的功能太底层）。这意味着 Vue 3 无法支持像 IE 11 这样的旧浏览器（除非使用旧的响应式系统进行降级，但会失去所有相关优势）。这是 Vue 3 决定放弃 IE 支持的关键技术因素。对于需要兼容旧浏览器的项目，这是一个必须考虑的局限性。

总结回答范例

Vue 3 使用 Proxy 重构响应式系统，相比 Vue 2 的 Object.defineProperty，其主要优势在于：

1. 全面的操作拦截：能代理对象属性的增、删、查等全套操作，消除了 Vue.set/delete 的需求。
2. 完美的数组支持：直接通过索引修改或改变 length 都能触发响应，无需重写方法。
3. 更优的性能特性：惰性代理提升了初始化速度，内存管理也更友好。

其局限性主要体现在：

1. 兼容性：无法 polyfill，导致放弃了对 IE 等旧浏览器的支持。
2. 特殊对象处理：需要对 Map、Set 等内置对象的方法进行特殊处理以保证正确性。

总体而言，这是一次面向未来的升级，它不仅解决了 Vue 2 的一系列痛点，更为 Composition API 和编译时优化等高级特性奠定了坚实的基础，虽然牺牲了部分兼容性，但换来了巨大的架构优势和更好的开发者体验。