Vue.js 2与Vue.js 3的主要差异对比
共同特征
1. 响应式架构
- 均采用"模板+响应式数据"的开发模式，界面会随数据变化自动刷新
- 都具备双向数据绑定（
v-model）、条件渲染（v-if/v-show）、循环渲染（v-for）等核心指令
2. 组件化架构
- 都以组件作为基本构建单元，支持父组件向子组件传递数据（props）和子组件向父组件发送事件（$emit）
- 都可通过插槽（slot）机制实现内容分发和组件复用
3. 指令系统
- Vue 2的内置指令（
v-bind、v-on、v-model、v-show、v-if、v-for等）在Vue 3中延续使用，仅在细节方面有所优化
4. 生命周期函数
- 大部分生命周期钩子保持同名：
created/mounted/updated/destroyed（Vue 3中调整为beforeUnmount/unmounted） - 钩子的执行顺序和逻辑流程与Vue 2基本保持一致
关键差异对比
| 对比维度 | Vue 2 | Vue 3 |
|---|---|---|
| 核心技术实现 | 基于Object.defineProperty（getter/setter机制） |
基于ES6 Proxy代理对象 |
| 响应式编程接口 | data、computed、watch |
新增reactive、ref、computed、watch（组合式API） |
| 组件编写风格 | 选项式API（data、methods、computed、watch等） |
同时支持选项式API和组合式API |
| 运行性能 | 启动较慢、包体积较大，约33KB压缩后 | 启动更快、包体积更小，约23KB压缩后 |
| 按需打包支持 | 几乎不支持Tree-shaking | 完全支持Tree-shaking，可实现按需导入 |
| TypeScript集成 | 社区维护类型声明，集成体验有限 | 官方深度支持、源码使用TS编写，类型推断更完善 |
| 新增功能特性 | 无 | Fragment、Teleport、Suspense、<script setup> |
| 全局API调用方式 | Vue.component、Vue.directive、Vue.mixin等 |
迁移到app.component、app.directive，通过createApp获取应用实例 |
| 销毁生命周期 | beforeDestroy、destroyed |
beforeUnmount、unmounted（命名更具语义性） |
v-model语法 |
单一语法（v-model="value"） |
支持多个v-model，语法调整为v-model:propName |
| 异步组件处理 | Vue.component('async', () => import(...)) |
同样支持，但更便捷，并可配合Suspense处理加载状态 |
1. 响应式机制底层实现
- Vue 2：利用
Object.defineProperty拦截对象属性的getter/setter方法，实现依赖追踪和变更通知。对于动态添加或删除属性需要手动调用Vue.set/Vue.delete。 - Vue 3：采用ES6的
Proxy代理对象，能够直接监控整个对象包括数组的增删改操作，无需额外的API辅助。性能表现更佳，内存占用更少。
2. API设计哲学：选项式vs组合式
选项式API（两种版本都支持）
export default {
data() {
return { counter: 0 }
},
computed: {
doubled() {
return this.counter * 2
}
},
methods: {
increase() {
this.counter++
}
},
watch: {
counter(newValue) {
console.log(newValue)
}
}
}
组合式API（Vue 3新增）
import { ref, computed, watch } from 'vue'
export default {
setup() {
const counter = ref(0)
const doubled = computed(() => counter.value * 2)
function increase() {
counter.value++
}
watch(counter, (newValue) => {
console.log(newValue)
})
return { counter, doubled, increase }
}
}
优势：相关逻辑集中管理，代码结构更加"平面化"，便于功能复用和单元测试。
3. 性能与包大小优化
Vue 3内部重构了虚拟DOM算法、模板编译器和响应式系统，大幅提升了渲染性能。原生支持Tree-shaking机制，使得生产环境的包体积更小、加载速度更快。
4. TypeScript深度集成
Vue 2的TypeScript支持主要依赖社区维护的vue-class-component、vue-property-decorator等工具，开发体验不够顺畅。Vue 3从内核层面进行设计，所有API都具备完整的类型定义，<script setup lang="ts">让组件编写更加简洁，类型推断更加准确。
5. 核心新功能特性
| 功能 | 描述 |
|---|---|
| Fragment | 组件可返回多个根节点，无需额外的包装元素 |
| Teleport | 将子组件渲染到DOM树的任意指定位置，常用于弹窗、通知等场景 |
| Suspense | 异步组件加载期间可显示占位内容，改善用户体验 |
<script setup> |
单文件组件的简化语法，更简洁，自动推导setup()返回值 |
迁移策略与兼容性
1. 全局API调用方式变更
// Vue 2
Vue.component('CustomComponent', CustomComponent)
// Vue 3
import { createApp } from 'vue'
const application = createApp(App)
application.component('CustomComponent', CustomComponent)
2. 生命周期钩子命名调整
| Vue 2 | Vue 3 |
|---|---|
| beforeCreate | beforeCreate |
| created | created |
| beforeMount | beforeMount |
| mounted | mounted |
| beforeUpdate | beforeUpdate |
| updated | updated |
| beforeDestroy | beforeUnmount |
| destroyed | unmounted |
3. v-model语法改进
- Vue 2仅支持对
value属性进行双向绑定 - Vue 3支持多个
v-model绑定，并可绑定到自定义属性
4. 跨版本插件兼容
- 大多数Vue 2插件在Vue 3环境下需要升级才能正常工作，Vue 3官方提供了兼容构建版本
- 建议逐步将业务逻辑迁移到组合式API，然后再升级核心框架版本
