面试题1：请系统讲讲 Vue2 与 Vue3 的核心差异（响应式、API 设计、性能与编译器）。

ThridTianFuStreet小貂蝉2026-03-31 11:20

1.响应式：

vue2使用object.defineProperty，劫持能力有局限，动态增删数组索引和对象属性无法收集，需要重写数组方法和提供$set()方法去兼容。而vue3采用的是proxy，底层操作能力更强，对动态增删数组索引和对象的操作也能收集，无需做兼容操作。

缺点是proxy不好使用ployfill，浏览器兼容性降低，不支持IE11

2.API设计

vue2为选项式API,逻辑分散。vue3为组合式API，按逻辑功能组织代码，相关代码集中；

vue2使用minxins处理复用代码。vue3使用自定义hooks函数处理复用代码，更灵活。

3.性能与编译器

1.tree-shaking:vue3打包会去除未使用代码与未使用API；

2.patch flags（补丁标记）：通过编译阶段标记节点动态内容，让运行时 diff 实现靶向更新、跳过静态节点、减少无效对比，显著提升视图更新性能。

代码总结：响应式 proxy

js 复制代码

// 1. 定义一个响应式函数（类似 Vue3 的 reactive）
function reactive(target) {
  return new Proxy(target, {
    get(target, key) { // 读取属性时触发
      return Reflect.get(target, key) // 正常返回值
    },
    set(target, key, value) { // 修改/新增属性时触发
      return Reflect.set(target, key, value) // 设置新值
    },
    deleteProperty(target, key) { // 删除属性时触发
      return Reflect.deleteProperty(target, key)
    }
  })
}