Vue 2 和 Vue 3 的简要对比
| 特性维度 | Vue 2 (使用 Vue CLI) | Vue 3 (推荐使用 Vite) |
|---|---|---|
| 构建工具 | Vue CLI (基于 Webpack) | Vite (基于 ESM，开发服务器启动和热更新更快) |
| 响应式原理 | Object.defineProperty (对数组和新增属性监听需特殊处理) |
Proxy (原生支持动态增删属性、数组索引操作) |
| 代码组织方式 | Options API (data, methods, computed 选项分离) | Composition API (使用 setup, 按功能逻辑组织代码) |
| TypeScript支持 | 较弱，需额外配置 | 原生支持完善，类型推断更佳 |
| 模板根节点 | 必须单根节点 | 支持多根节点 (Fragment) |
| 生命周期钩子 | beforeCreate, created, beforeMount, mounted, beforeDestroy, destroyed 等 |
Vue 3 中 beforeDestroy 和 destroyed 已更名为 **beforeUnmount** 和 **unmounted** 。Composition API 中使用形如 onMounted 的函数形式 。 |
| 新特性 | - | Teleport (传送门), Suspense (异步组件加载管理) |
| 打包体积 | 较大 (约33KB) | 更小 (约22KB, Tree-shaking 支持移除未使用代码) |
| 性能 | - | 渲染速度提升 (1.3~2倍)，内存占用减少 (约50%) |
| 全局API | new Vue() |
createApp() (避免全局污染) |
- 对于新项目，尤其中大型或需要长期维护的，强烈推荐直接使用 Vue 3 及其现代工具链（Vite + Pinia + TypeScript），能获得更好的开发体验、性能和维护性 。