| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 响应式系统 | 基于 Object.defineProperty | 基于 Proxy（支持深层监听和数组索引） |
| 虚拟 DOM 算法 | 全量比对（性能较低） | 静态标记（PatchFlag）优化（性能提升 1.3~2 倍） |
| 源码结构 | Flow 类型系统 | TypeScript 重构（更好的类型推导） |
| 包体积 | 全量包（约 33KB） | Tree-shaking 优化（按需加载，最小 13KB） |
Vue 2：
使用 Options API（data, methods, computed 等选项）
javascriptexport default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }}Vue 3：
新增 Composition API（setup() + 响应式函数）
vue<script setup>import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
</script>| Vue 2 | Vue 3（Composition API） |
|---|---|
beforeCreate | setup() |
created | setup() |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeDestroy | onBeforeUnmount（更名） |
destroyed | onUnmounted（更名） |
Fragment：支持多根节点模板
vue<template> <header></header> <main></main> </template>
Teleport：跨 DOM 层级渲染组件
vue<teleport to="#modal-container"> <div class="modal">...</div> </teleport>
Suspense：异步组件加载状态控制
vue<Suspense> <template #default><AsyncComponent /></template> <template #fallback>Loading...</template> </Suspense>
静态提升：编译时标记静态节点，跳过比对
事件缓存：@click 等事件自动缓存避免重复渲染
SSR 优化：服务端渲染性能提升 2~3 倍
| 库/工具 | Vue 2 | Vue 3 |
|---|---|---|
| 路由 | Vue Router 3.x | Vue Router 4.x（useRouter 组合式 API） |
| 状态管理 | Vuex 3.x | Vuex 4.x（兼容）或 Pinia（官方推荐） |
| UI 库 | Element UI | Element Plus |
| DevTools | Vue DevTools 5.x | Vue DevTools 6.x（支持组合式 API 调试） |
| 维度 | Vue 2 | Vue 3 |
|---|---|---|
| 类型推导 | 需要 vue-class-component 插件 | 原生支持（无需额外配置） |
| 组合式 API | 不兼容 | 完整的类型推导（ref(), computed() 等） |
| Props 类型检查 | 基于 PropTypes | 基于 TypeScript 接口 |
模板语法兼容性
Vue 3 移除 v-on.native 修饰符（通过 emits 选项声明事件）
v-model 支持多个绑定（如 v-model:title="pageTitle"）
全局 API
Vue 2：Vue.prototype 扩展
javascriptVue.prototype.$http = axios
Vue 3：使用 app.config.globalProperties
javascriptconst app = createApp(App)app.config.globalProperties.$http = axios
异步组件
Vue 2：通过函数返回 Promise
javascriptcomponents: { AsyncComp: () => import('./AsyncComp.vue') }Vue 3：使用 defineAsyncComponent
javascriptimport { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))破坏性变更
$children 被移除 → 使用 ref 获取子组件
filter 被废弃 → 改用计算属性或方法
eventBus 模式不再推荐 → 使用 Provide/Inject 或 Pinia
兼容性策略
Vue 3 提供 @vue/compat
可逐步迁移（单个组件升级）
| 维度 | Vue 2 | Vue 3 |
|---|---|---|
| 适用场景 | 遗留项目维护 | 新项目开发、追求性能和现代特性 |
| 学习曲线 | 简单（适合新手） | 稍高（需掌握组合式 API） |
| 长期维护 | 2023-12-31 停止维护 | 主流维护版本 |
| 性能 | 较低 | 显著提升（渲染/内存优化） |
| 扩展性 | 有限（Options API） | 高（组合式 API 逻辑复用） |
建议新项目直接使用 Vue 3，旧项目可评估是否值得迁移。