- **正确答案**：Vue 2 和 Vue 3 的主要差异包括响应式系统的实现方式（Object.defineProperty vs Proxy）、更小的体积、更好的 TypeScript 支持、Composition API 的引入、Fragment 支持、Teleport 组件、Suspense 组件、性能优化等。 - **解答思路**：回答这个问题时，应从以下几个维度进行展开： 1. 响应式系统：Vue 2 使用 Object.defineProperty 来劫持数据属性，而 Vue 3 使用了 ES6 的 Proxy，更加灵活和高效。 2. 性能优化：Vue 3 在编译阶段做了很多优化，例如 block tree、hoisted static nodes 等，提升了运行时性能。 3. Composition API：Vue 3 引入了类似 React Hook 的 Composition API，使得逻辑复用更方便。 4. 更好的 TypeScript 支持：Vue 3 本身是使用 TypeScript 编写的，对类型系统的支持更好。 5. 新增特性：如 Fragment、Teleport、Suspense 等组件。 6. 包结构变化：Vue 3 将一些功能拆分为子包（如 vue-router、vuex 演变为 pinia），核心库更轻量。 7. 生命周期钩子的变化：Vue 3 中 Composition API 下的生命周期钩子需要从 vue 中导入并调用。结合这些点可以全面回答两者的区别。 - **深度知识讲解**： ### 1. 响应式系统 - Vue 2 使用 `Object.defineProperty` 来监听对象属性的变化。这种方式存在以下问题： - 无法监听数组索引和新增属性。 - 需要递归遍历对象的所有属性来设置 getter/setter。 ```javascript // Vue 2 数据劫持伪代码 function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { get() { track(); // 收集依赖 return val; }, set(newVal) { if (newVal !== val) { val = newVal; trigger(); // 触发更新 } } }); } ``` - Vue 3 使用 `Proxy` 实现响应式系统，可以监听整个对象的行为，包括新增/删除属性、数组操作等。 ```javascript // Vue 3 响应式代理示例 function reactive(target) { return new Proxy(target, { get(target, key, receiver) { track(target, key); // 收集依赖 return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { const result = Reflect.set(target, key, value, receiver); trigger(target, key); // 触发更新 return result; } }); } ``` ### 2. Composition API Vue 3 提供了 Composition API，允许开发者以函数式的方式组织逻辑代码，类似于 React Hooks。示例： ```javascript import { ref, onMounted } from 'vue'; export default { setup() { const count = ref(0); function increment() { count.value++; } onMounted(() => { console.log('Component mounted'); }); return { count, increment }; } }; ``` ### 3. Fragment & Teleport - **Fragment**：Vue 3 允许组件有多个根节点。 - **Teleport**：用于将某些 DOM 节点渲染到指定的父节点之外的位置，比如弹窗、提示框等。 ```html

这是一个模态框

``` ### 4. Suspense Vue 3 支持异步组件加载，并提供 `` 组件用于处理加载状态。 ```html ``` ### 5. 构建工具与 Tree-shaking Vue 3 的构建系统支持更细粒度的 tree-shaking，未使用的模块不会被打包进最终文件中，从而减小体积。 ### 6. 生命周期钩子 Vue 3 中的 Composition API 使用 `onBeforeMount`, `onMounted`, `onBeforeUpdate`, `onUpdated`, `onBeforeUnmount`, `onUnmounted` 等生命周期钩子函数。 ### 7. 自定义渲染器（Custom Renderer） Vue 3 支持创建自定义渲染器，可用于非 DOM 渲染场景，如 Canvas、WebGL、React Native 等。 ```javascript const customRenderer = createRenderer({ createElement, patchProp, insert, remove, parentNode }); ``` 这为跨平台开发提供了更大的灵活性。 - **总结扩展知识点**： - Vue 3 对比 Vue 2，在架构设计上更加现代化，拥抱现代 JavaScript 特性（ES6+）。 - Composition API 使代码更具可读性和可维护性，尤其适合大型项目。 - Vue 3 的编译优化策略（block tree、静态提升、预解析动态节点等）显著提高了运行时性能。 - Vue 3 更好地支持服务端渲染（SSR）和渐进增强。 - Vue 3 的生态也在逐步完善，如 Vite 构建工具就是基于 Vue 3 的高性能特性推出的。掌握 Vue 3 的新特性有助于在面试中展示你对现代前端框架的理解和掌握程度。

字节一面

全站热榜

创作者周榜