- 正确答案：Vue 2 和 Vue 3 是 Vue.js 框架的两个主要版本，它们在响应式系统、API 设计、性能优化、TypeScript 支持等方面有显著区别。核心差异包括：Vue 3 使用 Proxy 实现响应式，而 Vue 2 使用 Object.defineProperty；Vue 3 引入了 Composition API，而 Vue 2 主要使用 Options API；Vue 3 更好的 TypeScript 支持；Vue 3 的打包体积更小、运行更快；Vue 3 中虚拟 DOM 重写，支持 Fragment 和 Teleport 等新特性。 - 解答思路：要回答这个问题，首先应从整体架构层面理解 Vue 2 和 Vue 3 的设计哲学变化，然后逐一对比关键模块的实现机制。重点包括响应式原理、API 风格、组件机制、编译优化和生态兼容性。通过对比底层实现（如数据劫持方式）和上层开发体验（如代码组织方式），可以全面展示两者的差异。 - 深度知识讲解： 1. 响应式系统原理差异（最核心区别） Vue 2 使用 Object.defineProperty 来劫持对象属性的 getter 和 setter，从而实现数据变化的监听。缺点： - 无法监听对象新增或删除属性（因此需要 Vue.set 或 this.$set） - 数组索引直接赋值或修改 length 不会触发更新 - 初始化时必须遍历所有属性进行定义，性能开销大示例代码（Vue 2 响应式模拟）： ``` function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { console.log('get', key); return val; }, set(newVal) { if (newVal !== val) { console.log('set', key); val = newVal; // 触发依赖更新 } } }); } const data = { count: 0 }; defineReactive(data, 'count', data.count); ``` Vue 3 使用 ES6 的 Proxy 对象来代理整个对象，能够监听更多的操作类型。优点： - 可以监听对象属性的添加和删除 - 可以监听数组索引赋值和 length 修改 - 不需要递归遍历所有属性，性能更好（懒劫持） - 支持 Map、Set、WeakMap、WeakSet 等原生集合类型示例代码（Vue 3 响应式模拟）： ``` function reactive(obj) { return new Proxy(obj, { get(target, key, receiver) { console.log('get', key); const result = Reflect.get(target, key, receiver); // 收集依赖（实际中调用 track） return typeof result === 'object' && result !== null ? reactive(result) : result; }, set(target, key, value, receiver) { console.log('set', key); const result = Reflect.set(target, key, value, receiver); // 触发更新（实际中调用 trigger） return result; }, deleteProperty(target, key) { console.log('delete', key); return Reflect.deleteProperty(target, key); } }); } const state = reactive({ count: 0 }); state.count; // get count state.count = 1; // set count state.name = 'vue'; // set name（支持动态添加） ``` 2. API 风格：Options API vs Composition API Vue 2 主要使用 Options API：data、methods、computed、watch 等选项分离逻辑。问题：当组件变大时，相关逻辑被拆散在不同选项中，难以维护。 Vue 3 引入 Composition API（setup 函数 + reactive / ref / effect），允许按逻辑功能组织代码。示例对比： Vue 2 写法： ``` export default { data() { return { count: 0, name: 'Vue' }; }, computed: { doubleCount() { return this.count * 2; } }, methods: { increment() { this.count++; } }, watch: { count(newVal) { console.log('count changed:', newVal); } } }; ``` Vue 3 Composition API 写法： ``` import { ref, computed, watch } from 'vue'; export default { setup() { const count = ref(0); const name = ref('Vue'); const doubleCount = computed(() => count.value * 2); function increment() { count.value++; } watch(count, (newVal) => { console.log('count changed:', newVal); }); return { count, name, doubleCount, increment }; } }; ``` Composition API 优势： - 更好的逻辑复用（自定义 Hook） - 更灵活的代码组织 - 更好的 TypeScript 类型推导 3. 编译与运行时优化 Vue 3 重写了编译器，引入了“静态提升”、“补丁标志”（Patch Flag）、“树摇”（Tree-shaking）等优化。 - 静态节点提升：将模板中的静态节点提取到 render 外部，避免重复创建。 - Patch Flag：在 VNode 上标记动态内容类型（如 TEXT, CLASS, PROPS），diff 时跳过静态部分。 - Tree-shaking：模块化设计，未使用的 API 不会打包进最终代码。 4. 新特性支持 - Fragment：组件可以有多个根节点 ``` ``` - Teleport：将 DOM 渲染到任意位置（如 modal 到 body） ``` ``` - Suspense：异步组件加载状态管理（实验性） 5. TypeScript 支持 Vue 3 使用 TypeScript 重写，提供更好的类型定义和推导能力，Composition API 完全支持泛型和类型推断。 6. 生命周期钩子变化 - beforeCreate -> setup() - created -> setup() - beforeMount -> onBeforeMount - mounted -> onMounted - 等等（除了 setup 外，其他基本是 onXxx 形式）注意：Vue 3 中仍然兼容 Vue 2 的生命周期选项（如 mounted），但 Composition API 推荐使用 onXxx 函数。 7. 兼容性和生态 - Vue 3 不再支持 IE11 - 生态库逐步迁移（如 Vue Router 4、Vuex 4、Pinia 成为推荐状态管理） - Vue 2 在 2023 年底停止维护 - 扩展知识： - Vue 3 的响应式系统基于发布-订阅模式，结合 WeakMap 存储依赖关系： ``` const targetMap = new WeakMap(); // target -> depsMap const depsMap = new Map(); // key -> dep const dep = new Set(); // effects ``` - effect 函数实现响应式副作用： ``` function effect(fn) { const effectFn = () => { cleanup(effectFn); activeEffect = effectFn; fn(); }; effectFn.deps = []; effectFn(); } ``` - ref 与 reactive 区别： - ref：用于原始值，内部通过 { value: ... } 包装，模板中自动解包 - reactive：用于对象，返回代理对象，不能用于原始值 - shallowReactive / shallowRef：浅层响应式，只代理第一层总结：Vue 3 相比 Vue 2 是一次全面升级，从底层响应式机制到上层开发体验都有质的飞跃。掌握这些差异不仅有助于面试，也能帮助开发者写出更高效、可维护的代码。在准备校园招聘面试时，建议深入理解 Proxy 与 Object.defineProperty 的区别，并能手写简单的响应式实现。

懂车帝 企业效率 前端 一面

全站热榜

创作者周榜

懂车帝企业效率前端一面