首页教程软件教程正文

如何从Vue2升级到Vue3，这些要点你得知道！

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 892 浏览 4277 个字

摘要 :

文章目录一、核心依赖升级（一）框架与工具链二、代码层重构（一）组件定义变更（二）生命周期钩子重命名（三）全局API变更三、生态兼容性问题（一）UI库……

文
章
目
录

一、核心依赖升级

（一）框架与工具链

二、代码层重构

（一）组件定义变更
（二）生命周期钩子重命名
（三）全局API变更

三、生态兼容性问题

（一）UI库迁移（Element UI → Element Plus）
（二）路由系统升级（Vue Router v3 → v4）
（三）状态管理（Vuex v3 → v4）

四、高频问题与解决方案
五、渐进式迁移策略

（一）混合模式过渡
（二）分模块升级优先级
（三）自动化检测工具

六、迁移后验证

（一）功能测试
（二）性能监控

从Vue2升级到Vue3是不少开发者会面临的任务，这个过程涉及多个方面的调整和优化，下面就为大家详细梳理一下。

一、核心依赖升级

（一）框架与工具链

Vue核心库升级：
想要将Vue核心库升级到最新稳定版，可以使用以下命令：

npm uninstall vue && npm install vue@3.4.1  # 强制升级到最新稳定版

这条命令先卸载当前项目中的Vue旧版本，然后安装指定的Vue 3.4.1版本。

配套库升级：
同步升级相关配套库也是必要的操作，比如Vue Router、Vuex和测试工具@vue/test-utils ，可以通过下面的命令来完成：

npm install vue-router@4.3.2 vuex@4.1.3 @vue/test-utils@2.4.5  # 同步升级

这样能确保各个库之间的兼容性，避免因版本差异导致的问题。

构建工具迁移（Webpack → Vite）：
从Webpack迁移到Vite，需要对配置进行重构。将原来的vue.config.js替换为vite.config.js，并且要显式声明路径别名和全局变量，示例代码如下：

import { defineConfig } from \'vite\'
export default defineConfig({
  resolve: { alias: { \'@\': \'/src\' } },
  define: { \'process.env\': import.meta.env }  // 兼容旧环境变量写法
})

这里设置了路径别名@指向项目的src目录，同时对旧的环境变量写法进行了兼容处理。

在处理静态资源方面，Webpack和Vite的写法也有所不同。旧的Webpack写法是：

const img = require(\'@/assets/logo.png\')

而在Vite中，新的写法为：

const img = new URL(\'./assets/logo.png\', import.meta.url).href

这种变化需要开发者在升级过程中特别注意，确保静态资源的引用正确。

二、代码层重构

（一）组件定义变更

在Vue 2中，使用选项式API定义组件，而Vue 3更推荐使用组合式API。对比示例如下：

<!-- Vue 2（选项式） -->
<script>
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}
</script>

<!-- Vue 3（组合式） -->
<script setup>
import { ref } from \'vue\'
const count = ref(0)
const increment = () => count.value++
</script>

从代码中可以看出，组合式API让代码结构更加清晰，逻辑更加集中。

（二）生命周期钩子重命名

Vue 3对部分生命周期钩子进行了重命名，具体对应关系如下：

Vue 2	Vue 3	触发场景
`beforeDestroy`	`beforeUnmount`	组件销毁前清理定时器/事件监听
`destroyed`	`unmounted`	组件已销毁后执行操作

在升级过程中，需要将代码中的旧生命周期钩子名称替换为新的名称，以确保组件的生命周期逻辑正常运行。

（三）全局API变更

Vue.prototype替代：
在Vue 2中，我们常常通过Vue.prototype来挂载全局属性或方法，例如：

// Vue 2
Vue.prototype.$http = axios

但在Vue 3中，需要使用新的方式：

// Vue 3
const app = createApp(App)
app.config.globalProperties.$http = axios

通过createApp创建应用实例，再通过app.config.globalProperties来挂载全局属性。

过滤器（Filter）移除：
Vue 3移除了过滤器（Filter）。在Vue 2中，我们可以这样使用过滤器：

<!-- 旧写法 -->
<div>{{ price | currency }}</div>

在Vue 3中，则需要通过定义函数来实现相同的功能：

<!-- 新写法 -->
<div>{{ formatCurrency(price) }}</div>

这里formatCurrency是开发者自定义的函数，用于对price进行格式化处理。

三、生态兼容性问题

（一）UI库迁移（Element UI → Element Plus）

从Element UI迁移到Element Plus时，按需引入的配置方式发生了变化。在vite.config.js中，可以这样配置：

import Components from \'unplugin-vue-components/vite\'
import { ElementPlusResolver } from \'unplugin-vue-components/resolvers\'
export default defineConfig({
  plugins: [Components({ resolvers: [ElementPlusResolver()] })]
})

通过这种配置，能够实现Element Plus组件的按需引入，提高项目的性能。

（二）路由系统升级（Vue Router v3 → v4）

路由模式声明：
Vue 2和Vue 3在路由模式声明上有所不同。Vue 2的写法是：

// Vue 2
new Router({ mode: \'history\' })

而在Vue 3中，需要使用createWebHistory来创建历史模式：

// Vue 3
createRouter({ history: createWebHistory() })

路由守卫参数变化：
路由守卫的参数也发生了变化。在Vue 2中：

router.beforeEach((to, from, next) => { ... })

在Vue 3中，next参数被移除：

router.beforeEach((to, from) => { ... })

开发者需要根据这种变化调整路由守卫中的逻辑。

（三）状态管理（Vuex v3 → v4）

在模块注册方面，Vue 2和Vue 3也有差异。Vue 2的写法是：

// Vue 2
new Vuex.Store({ modules: { user } })

而在Vue 3中，使用createStore来创建存储：

// Vue 3
createStore({ modules: { user } })

四、高频问题与解决方案

在升级过程中，可能会遇到一些常见问题，下面是这些问题及对应的解决方案：

问题分类	具体问题	解决方案
模板语法	`v-model`默认绑定属性变为`modelValue`	显式声明绑定属性：`<Child v-model:title=\"value\" />` ，子组件通过`props.title`和`emit(\'update:title\')`
事件总线	Vue 3移除`$on`/`$off`	使用`mitt`库替代：`emitter.on(\'event\', callback)`
响应式系统	Proxy导致数组索引修改未触发更新	使用`Vue.set`或替换整个数组：`list.value = [...newList]`
TypeScript	`this`类型推断失败	使用`defineComponent`包裹组件，并显式声明类型：`export default defineComponent({ ... })`
第三方插件	`vue-awesome-swiper`未适配Vue 3	替换为`swiper/vue`或`@vueuse/core`的`useSwiper`

五、渐进式迁移策略

（一）混合模式过渡

如果希望在升级过程中让新旧代码共存，可以借助@vue/compat来实现兼容构建。在vite.config.js中进行如下配置：

// vite.config.js
import vue from \'@vitejs/plugin-vue\'
export default defineConfig({
  plugins: [vue({ template: { compatConfig: { MODE: 2 } } })]
})

这样配置后，项目中可以同时使用Vue 2和Vue 3的代码，方便逐步进行升级改造。

（二）分模块升级优先级

在升级时，可以按照不同模块的类型来确定升级的优先级：

优先级1：工具函数/工具类：像日期格式化、请求封装等工具函数或工具类，可以优先进行升级。这些模块相对独立，升级后对其他部分的影响较小，并且能够为后续的升级工作提供更好的基础支持。
优先级2：基础组件：例如Button、Input等无状态组件，它们的逻辑相对简单，升级难度较低。先升级这些基础组件，有助于减少后续业务页面升级时可能出现的兼容性问题。
优先级3：业务页面：订单页、用户详情页等复杂逻辑页面，由于涉及较多的业务逻辑和交互，升级难度较大。放在后面进行升级，可以在前面基础工作完成的基础上，更稳定地推进，降低风险。

（三）自动化检测工具

ESLint规则：安装eslint-plugin-vue，利用它来检测项目中是否还存在废弃的API，帮助开发者及时发现并修改代码中的问题。
迁移助手：运行vue-migration-helper扫描整个代码库，它可以帮助我们快速定位需要升级的部分，提高升级的效率和准确性。

六、迁移后验证

（一）功能测试

核心场景测试：对表单提交、路由跳转、状态管理、异步请求这些核心功能进行全面测试，确保升级后这些功能能够正常运行。
边界案例测试：还要考虑到一些边界情况，比如大数据量列表渲染时是否会出现性能问题、是否兼容服务器端渲染（SSR），以及针对IE浏览器的降级方案（如果项目需要支持IE）是否有效等。