Vue 2 与 Vue 3 的区别

核心原理与架构

1. ‌响应式系统‌：Vue2 使用Object.defineProperty实现数据劫持，存在性能瓶颈；Vue3 采用Proxy代理，支持动态添加属性和数组索引监听，性能更高 。‌‌
2. ‌架构设计‌：Vue3 基于 TypeScript 重写，采用模块化架构，支持更好的 Tree-Shaking，包体积更小 。‌‌

API 设计与开发体验

‌API 风格‌：

1. Vue2 主导 Options API，逻辑分散，逻辑分散在 data、methods、computed、watch 等选项中，组件的状态、行为和生命周期相对独立。

2. Vue3 引入 Composition API，支持逻辑复用和集中管理，同时兼容 Options API。‌‌允许开发者将相关的功能逻辑放在一起，使用 setup() 函数来组织组件代码。这使得代码更易于复用和维护，特别是在处理复杂组件时。

‌生命周期‌：Vue3 调整了钩子函数，如beforeDestroy改为beforeUnmount，Composition API 中需通过onMounted等形式调用 。‌‌

TypeScript 支持‌：Vue3 原生支持 TypeScript，类型推导更完善，无需额外配置 。‌‌

性能优化与新特性

新特性‌：Vue3 支持多根节点（Fragment）、Teleport（传送门）和 Suspense（异步依赖处理），Vue2 不支持 。‌‌

构建与生态‌：Vue3 推荐使用 Vite 构建工具，状态管理推荐 Pinia，开发启动速度更快 。‌‌

渲染性能‌：Vue3 重写虚拟 DOM，引入静态提升和补丁标记，渲染效率显著提升 。‌‌

Fragment 支持 在 Vue 2 中，每个组件必须有一个单一的根元素。而在 Vue 3 中，Vue 允许组件返回多个根元素，也就是支持 Fragment，这使得组件的结构更加灵活。