速通前端高频面试Vue2和Vue3区别

Vue2和Vue3的区别(从底层到实战的全过程）

1. 底层架构和性能

1.1 响应式系统

Vue2

• 使用 Object.defineProperty() 来劫持对象属性
• 无法检测对象属性的添加或删除
• 对数组的变化监测有限制

Vue3

• 使用 Proxy 来创建响应式对象
• 可以检测整个对象，包括属性的添加和删除
• 对数组的变化有更好的支持

解释：Vue3的响应式系统更加强大和灵活。想象一下，Vue2就像是一个只能监视房间里特定物品的摄像头，而Vue3则是可以监视整个房间的全景摄像头，能够捕捉到任何变化。

1.2 虚拟DOM

Vue2

• 使用基于模板的虚拟DOM
• 每次更新都需要遍历整个虚拟DOM树

Vue3

• 重写虚拟DOM，引入静态标记（Static Hoisting）和片段（Fragment）
• 可以跳过静态节点，只关注动态内容

解释：如果把页面比作一本书，Vue2每次更新都要翻阅整本书，而Vue3会用书签标记出可能变化的部分，直接翻到这些页面，大大提高了效率。

1.3 编译优化

Vue2

• 主要在运行时进行优化
• 模板编译优化有限

Vue3

• 引入了静态提升、监听事件缓存、树结构打平等编译策略
• 在编译阶段就进行了大量优化

解释：Vue3就像是一个更聪明的厨师，在烹饪（编译）阶段就做好了各种准备工作，使得用餐（运行）时更加高效流畅。

2. API和特性变化

2.1 组合式API（Composition API）

Vue2

• 主要使用选项式API（Options API）
• 逻辑分散在不同的选项中，大型组件难以维护

Vue3

• 引入组合式API，但仍然支持选项式API
• 允许更灵活地组织和重用代码

解释：如果说Vue2的组件是一个固定格式的表格，那么Vue3的组合式API就像是可以自由拼接的积木，你可以根据需要组合不同的功能块。

2.2 生命周期钩子

Vue2

• beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

Vue3

• setup（新增，替代beforeCreate和created）, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted

解释：Vue3的生命周期钩子更加语义化，例如将"销毁"改为"卸载"，更贴近组件的实际生命周期。

2.3 多根节点组件（Fragment）

Vue2

• 组件模板必须有一个根节点

Vue3

• 组件可以有多个根节点

解释：Vue3移除了对单根节点的限制，就像是从只能画在一个画框里，变成了可以在整个画布上自由创作。

2.4 Teleport组件

Vue2

• 不支持

Vue3

• 新增Teleport组件，允许将内容渲染到DOM树的其他部分

解释：Teleport就像是一个传送门，可以将组件中的一部分内容传送到页面的其他位置，非常适合创建模态框等脱离普通文档流的元素。

2.5 Suspense组件

Vue2

• 不支持

Vue3

• 新增Suspense组件，用于处理异步依赖

解释：Suspense就像是一个智能等待区，可以优雅地处理异步加载的组件，显示加载状态或错误信息。

3. TypeScript支持

Vue2

• 有限的TypeScript支持
• 需要额外的类型声明文件

Vue3

• 用TypeScript重写，提供原生的类型支持
• 更好的类型推断和IDE支持

解释：如果说Vue2对TypeScript的支持是后天学习的外语，那么Vue3就是将TypeScript作为母语，支持更加自然和全面。

4. 工具链和生态系统

4.1 构建工具

Vue2

• 主要使用webpack

Vue3

• 推荐使用Vite，但仍然支持webpack

解释：从Vue2到Vue3，构建工具的变化就像是从传统的柴火灶转向了现代的电磁炉，Vite提供了更快速、更高效的开发体验。

4.2 状态管理

Vue2

• Vuex 3.x

Vue3

• Vuex 4.x 或 Pinia

解释：Vue3的状态管理就像是升级了的工具箱，不仅保留了原有的工具（Vuex），还添加了新的、更易用的工具（Pinia）。

4.3 路由

Vue2

• Vue Router 3.x

Vue3

• Vue Router 4.x

解释：Vue Router的升级就像是地图App的更新，新版本提供了更多功能和更好的性能，但基本使用方式保持不变。