本文提供从 Vue 2 迁移到 Vue 3 的完整实战指南，涵盖核心概念差异、分步迁移步骤、关键代码示例、常见坑点与性能优化建议，帮助开发者平稳过渡到 Vue ...
快速概述
Vue 2 已于 2023 年 12 月 31 日停止更新，长期维护已结束，新项目应直接采用 Vue 3，存量项目也需规划迁移路径。本文解决的核心问题是：如何在不破坏现有业务的前提下，将基于选项式 API 的 Vue 2 项目平稳迁移到 Vue 3 的组合式 API 体系。适用场景包括中小型后台管理系统、组件库升级以及大型应用的渐进式重构。前置环境要求：Node.js 12+、npm 或 yarn 包管理器，并建议先阅读官方迁移指南。
核心概念与原理
Vue 2 广泛使用选项式 API，组件逻辑按 data、methods、computed、watch、props 和生命周期钩子等选项组织。Vue 3 在保留选项式 API 的同时新增了组合式 API，允许将同一功能的响应式状态、计算属性和方法集中在一个 setup 函数中，显著提升代码复用性与可维护性。迁移的核心并非重写全部代码，而是理解两者在响应式系统、组件通信和生命周期上的差异，并采用兼容策略逐步替换。
实战步骤与代码
第一步：创建新项目或升级依赖
对于新项目，直接使用 Vue CLI 创建 Vue 3 项目：
// 创建 Vue 3 项目
vue create vue3-demo
// 进入项目根目录
cd vue3-demo
// 启动开发服务器
npm run serve对于存量项目，需将 vue 依赖升级到 3.x，并同步升级 vue-router 与 vuex 至对应版本。
第二步：迁移选项式 API 到组合式 API
Vue 2 中通过 data 定义响应式数据，methods 定义方法，computed 定义计算属性。Vue 3 组合式 API 中，使用 ref 或 reactive 替代 data，使用普通函数替代 methods：
// Vue 2 选项式写法
export default {
data() {
return { message: 'hello world', count: 0 }
},
methods: {
sayHello() {
console.log(this.message)
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
// Vue 3 组合式写法 import { ref, computed } from 'vue' export default { setup() { const message = ref('hello world') const count = ref(0) const sayHello = () => console.log(message.value) const reversedMessage = computed(() => message.value.split('').reverse().join('')) return { message, count, sayHello, reversedMessage } } }
注意：在组合式 API 中，访问 ref 创建的数据需使用 .value，模板中则自动解包。
第三步：迁移生命周期钩子
Vue 2 的 beforeDestroy 和 destroyed 在 Vue 3 中更名为 beforeUnmount 和 unmounted。同时，组合式 API 提供了 onMounted、onUpdated 等钩子函数，需从 vue 中导入后调用。
第四步：处理组件通信
Vue 2 中通过 props 接收父组件数据，通过 $emit 发送事件给父组件。Vue 3 组合式 API 中，使用 defineProps 和 defineEmits 宏（
评论列表 0