- 正确答案：Vue2 和 Vue3 在响应式系统、组件语法、API 设计、性能优化、TypeScript 支持、生命周期、模板编译、全局 API、Tree Shaking 支持等多个核心维度存在本质差异。Vue3 是一次重大的架构重构，而非简单功能叠加，其核心目标是提升可维护性、运行时性能、开发体验与类型安全。 - 解答思路：从底层实现机制出发（如响应式原理的 Object.defineProperty → Proxy），逐步展开至上层开发接口（Options API → Composition API）、构建时行为（模板编译策略变化）、工程能力（Tree Shaking、模块化导出）和生态适配（插件、UI 库升级路径）。需避免仅罗列表层语法差异，而应揭示“为什么这样改”——例如 Proxy 为何能解决 Vue2 的数组索引赋值/新增属性监听失效问题，Composition API 如何解决 Options API 的逻辑复用与组织困境。 - 深度知识讲解： 1. 响应式系统底层原理： - Vue2：基于 Object.defineProperty 对 data 中每个属性进行递归劫持 getter/setter。缺陷明显： * 无法检测对象属性的动态添加/删除（需 vm.$set/vm.$delete）； * 无法监听数组通过索引直接赋值（arr[0] = x）或修改 length（arr.length = 0）； * 初始化时需遍历所有属性，大数据量下初始化性能差； * 不支持 Map/Set/WeakMap/WeakSet 等原生集合类型。 - Vue3：采用 ES6 Proxy 全面替代 defineProperty。Proxy 可拦截整个对象（包括新增/删除属性、in 操作符、for...in、Object.keys 等），且对数组操作天然支持（如 arr[0] = x、arr.length = 0、arr.push() 均触发 set 拦截）。同时配合 Reflect API 实现更健壮的代理转发。注意：Proxy 是浅层代理，因此 reactive() 默认深度响应；但 ref() 包裹基本类型时，内部仍通过 .value 转为 reactive 包装的对象以维持统一响应式语义。 2. 响应式 API 分层设计： - Vue2：只有 this.$data + this.$set 统一入口，无显式响应式创建函数。 - Vue3：提供细粒度响应式构造函数： * reactive(obj)：返回 Proxy 包装的响应式对象（仅适用于对象/数组）； * ref(value)：返回 { value: reactiveWrapper } 形式的响应式引用，用于基本类型及模板中自动解包（在 template 中读写 ref 不需 .value）； * shallowRef / shallowReactive：仅代理第一层，避免深层 Proxy 开销，适用于性能敏感场景（如大型列表仅需顶层更新）； * readonly / shallowReadonly：返回只读代理，增强运行时安全性； * customRef(factory)：允许自定义 ref 行为（如防抖 ref、lazy ref）。 3. 组合式 API（Composition API） vs 选项式 API（Options API）： - Vue2 强制使用 Options API（data/computed/methods/watch/lifecycle hooks 等按选项分组），导致逻辑关注点分散（如一个 feature 的响应式数据、计算属性、方法、副作用全部散落在不同配置块中），难以复用和测试。 - Vue3 推出 Composition API（setup() 函数），允许开发者按逻辑功能组织代码： * 使用 ref/reactive 声明状态； * useXXX() 自定义 Hook 封装可复用逻辑（如 useMouse、useFetch）； * 生命周期钩子以 onMounted/onUpdated 等函数形式调用，与 setup 同作用域； * 依赖注入 provide/inject 支持响应式传递（inject 返回 ref 或 reactive）； * setup 执行时机早于 created，this 不可用，所有上下文通过参数（props, context）或 import 的 API 获取。 - 注意：Vue3 完全兼容 Options API（为迁移保留），但 Composition API 是官方推荐的长期演进方向，尤其利于 TypeScript 类型推导。 4. 模板编译与虚拟 DOM 优化： - Vue2：vdom diff 算法为双端对比（头头、尾尾、头尾、尾头），更新粒度粗（整节点替换）；静态节点提取（static class/style 提取）有限。 - Vue3：引入 Block Tree（块树）概念——编译器将模板分割为嵌套的动态区块（block），每个 block 内部维护自己的动态节点索引表（patchFlag）。运行时 diff 仅遍历动态节点，跳过静态内容；同时支持静态提升（hoist static）、预字符串化（pre-stringification of static content）、缓存事件处理函数（cacheHandlers）等。实测 SSR 和首屏渲染性能提升约 2~3 倍。 5. 生命周期钩子变更： - Vue2：beforeCreate / created / beforeMount / mounted / beforeUpdate / updated / beforeDestroy / destroyed / errorCaptured - Vue3：setup() 替代 beforeCreate/created；其余钩子名改为 onXxx（如 onMounted），且必须在 setup() 或 setup 内部的组合式函数中调用；新增 onRenderTracked / onRenderTriggered（用于调试响应式依赖追踪）；destroyed → onUnmounted（语义更准确）；errorCaptured → onErrorCaptured。 6. 全局 API 重构： - Vue2：全局 API（Vue.component / Vue.directive / Vue.mixin / Vue.use / Vue.set / Vue.delete）直接挂载在 Vue 构造函数上，不支持多实例隔离，影响 Tree Shaking。 - Vue3：全局 API 通过 createApp() 创建应用实例后链式调用： * const app = createApp(App) * app.component().directive().use().mixin() * app.mount('#app') * 每个 app 实例完全独立（支持微前端多 Vue 实例共存）； * 所有 API 均为具名导出（import { createApp, ref, computed } from 'vue'），天然支持 ES Module Tree Shaking。 7. TypeScript 支持： - Vue2：类型定义基于 Vue 类型声明文件（@vue/runtime-dom），对 Options API 的泛型支持较弱（如 this 类型需手动 infer），组合式逻辑难以精确推导。 - Vue3：完全用 TypeScript 重写，所有 API 类型定义精准；Composition API 天然契合 TS（ref、computed、defineComponent）；setup() 参数 props 和 context 均可强类型约束；defineProps / defineEmits 宏（ ``` Vue3 响应式原理简化示意（Proxy 实现）： ``` function reactive(target) { if (typeof target !== 'object' || target === null) return target const handler = { get(obj, key, receiver) { track(obj, key) // 依赖收集（关联当前 activeEffect） return Reflect.get(obj, key, receiver) }, set(obj, key, value, receiver) { const result = Reflect.set(obj, key, value, receiver) trigger(obj, key) // 触发更新（执行所有依赖 effect） return result } } return new Proxy(target, handler) } ``` 注：实际 Vue3 的 reactive 还包含深层代理、readonly 代理、数组特殊处理（如 push/pop/splice 的 length 更新）、Symbol 属性拦截等完整逻辑，且与 effect 系统（track/trigger）深度耦合。

携程一面 凉经

全站热榜

创作者周榜

携程一面凉经