Vue 2.x 项目升级到 Vue 3详细指南【总结版】

文章目录

0.前言
1.升级教程
- 1.1. 升级 Vue CLI：
- 1.2. 安装 Vue 3：
- 1.3. 更新 Vue 组件：
- 1.4. 迁移全局 API：
- 1.5. 迁移路由和状态管理器：
- 1.6. 迁移 TypeScript：
- 1.7. 迁移测试代码：
2.迁移总结
- 2.0. ==这一项很关键==
- 2.1. 语法变化
- 2.2. 插件和库的兼容性
- 2.3. TypeScript 支持
- 2.4. 升级顺序
- 2.5. 测试和调试
3.官方文档和其他参考资源：

0.前言

在这里插入图片描述

首先提个问题，大家公司的Vue前端项目目前使用的版本是多少呢，是否已经在计划升级版本或者进行重构，那么如果有这个计划，那么这篇文章将是具有一定指导意义，至少在你的升级改造的工时评估方面有着借鉴意义。

随着Vue 版本的不断升级迭代，目前基本上有着稳定开发团队和技术积累的公司，陆陆续续将前端服务的Vue版本从Vue2.x 升级Vue3。因为Vue3 它带来了许多新特性和改进，例如更快的渲染速度、更好的类型推导、更好的组合 API 等等。如果你正在使用 Vue 2.x，升级到 Vue 3 可以让你的项目获得这些新特性和改进，并且更好地适应未来的发展。然而，Vue 3 与 Vue 2.x 在语法和一些核心概念上有一些重大变化，因此升级 Vue 3 可能需要一些额外的工作。本指南将为你提供一些有关如何将 Vue 2.x 项目升级到 Vue 3 的详细说明和指导，希望能够帮助你平滑地进行升级。

有同学说我这一篇看的太费劲，建议我直接整理一篇Vue2.x 升级到 vue3 的修改清单，
所以又整理了一篇《Vue 2.x 项目升级到 Vue 3详细指南【修改清单】》希望对大家有所帮助

1.升级教程

1.1. 升级 Vue CLI：

如果你的项目是使用 Vue CLI 创建的，则需要升级到最新版本的 Vue CLI（3.0.0 及以上），以便支持 Vue 3。可以使用以下命令升级 Vue CLI：

npm install -g @vue/cli

或

yarn global add @vue/cli

1.2. 安装 Vue 3：

使用 npm 或 yarn 安装最新版本的 Vue 3：

npm install vue@next

或

yarn add vue@next

1.3. 更新 Vue 组件：

在 Vue 3 中，一些属性和选项被重命名或删除，需要更新组件代码。

v-bind=“$listeners” 替换为 v-bind=“listeners”

在 Vue 2.x 中，可以使用 v-bind=“$listeners” 将所有父组件传递的事件监听器绑定到子组件上，但是在 Vue 3 中，这种语法被弃用了，需要改为 v-bind=“listeners”。
v-bind=“$attrs” 替换为 v-bind=“attrs”

在 Vue 2.x 中，可以使用 v-bind=“$attrs” 将所有非 prop 的父组件属性绑定到子组件上，但是在 Vue 3 中，需要改为 v-bind=“attrs”。
v-on:click.native 替换为 @click.native

在 Vue 2.x 中，可以使用 v-on:click.native 绑定原生 DOM 事件，但是在 Vue 3 中，需要改为 @click.native。
v-on:keyup.enter 替换为 @keyup.enter
在 Vue 2.x 中，可以使用 v-on:keyup.enter 绑定键盘事件，但是在 Vue 3 中，需要改为 @keyup.enter。
v-on:keyup.13 替换为 @keyup.13

在 Vue 2.x 中，可以使用 v-on:keyup.13 绑定键盘事件，但是在 Vue 3 中，不再支持这种语法，需要改为 @keyup.13。
v-on:keyup 替换为 @keyup
在 Vue 2.x 中，可以使用 v-on:keyup 绑定键盘事件，但是在 Vue 3 中，需要改为 @keyup。

1.4. 迁移全局 API：

Vue 3 中全局 API 的使用方式也有所改变。例如：

Vue.filter 替换为 app.config.globalProperties.$filter

在 Vue 2.x 中，可以使用 Vue.filter 注册全局过滤器，但是在 Vue 3 中，需要使用 app.config.globalProperties.$filter。
Vue.directive 替换为 app.directive

在 Vue 2.x 中，可以使用 Vue.directive 注册全局指令，但是在 Vue 3 中，需要使用 app.directive。
Vue.mixin 替换为 app.mixin

在 Vue 2.x 中，可以使用 Vue.mixin 全局混入选项，但是在 Vue 3 中，需要使用 app.mixin。

1.5. 迁移路由和状态管理器：

如果你的项目中使用了 Vue Router 和 Vuex 等状态管理器，需要将其升级到最新版本，以适配 Vue 3。

Vue Router：

Vue Router 4.x 支持 Vue 3，需要将 Vue Router 和 Vue 升级到最新版本，然后更新路由的 API 和语法，例如：
- router-link 替换为 RouterLink
- v-bind=“ $ro u t e " 替换为 : t o = "$ route”
- $router.push 替换为 router.push
Vuex：

Vuex 4.x 支持 Vue 3，需要将 Vuex 和 Vue 升级到最新版本，然后更新状态管理器的 API 和语法，例如：
- store.subscribe 替换为 store.watch
- mapState 替换为 useStore/mapState

1.6. 迁移 TypeScript：

如果你的项目使用 TypeScript，需要更新 TypeScript 版本并进行相应的配置和迁移。

TypeScript 版本：

Vue 3 需要 TypeScript 3.9 及以上版本。

配置文件：
需要更新 TypeScript 配置文件（tsconfig.json）中的编译选项，例如：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "types": [
      "webpack-env",
      "@types/node",
      "@vue/cli-plugin-babel/types",
      "@vue/cli-plugin-eslint/types",
      "@vue/cli-service"
    ]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

类型定义文件：

Vue 3 中的类型定义文件（.d.ts）有所改变，需要将其更新为最新的版本。

1.7. 迁移测试代码：

如果你的项目中有测试代码，需要更新测试框架和测试代码，以适配 Vue 3。

测试框架：

更新测试框架到最新版本，例如 Jest 27.x、Mocha 9.x 等。
测试代码：

更新测试代码，例如：

 - import { mount } from '@vue/test-utils' 替换为 import { mount } from 'vue-test-utils'
 - Vue.extend 替换为 defineComponent
 - wrapper.vm.$emit 替换为 wrapper.trigger

将 Vue 2.x 项目升级到 Vue 3 需要更新组件代码、全局 API、路由和状态管理器、TypeScript 配置和测试代码等。如果你对迁移过程不确定，可以先在一个新的项目中尝试升级，以便在实际项目中更好地适配 Vue 3。

2.迁移总结

2.0. 这一项很关键

vue2.x升级到vue3 做好充分的准备和团队，以及领导沟通清楚，步骤以及面临的风险，以及应急准备，以及知识储备和人员储备。就比如搞了一半发现领导根本对vue升级的急迫性没那么强烈，中途给你把资源撤了，半拉子烂摊子毁在你的手里，瞬间挫败感笼上心头。记住资源是团队作战中很重要的事情，提前给团队和领导信心和目标。在升级之前，需要做好充分的准备和规划。有的时候干成一件事，也许技术上根本不是障碍。

下面只是一些技术上的总结和技术事项，都好解决。

2.1. 语法变化

Vue 3 中的语法与 Vue 2.x 有一些重大变化，例如使用 createApp 替代了 new Vue，使用 setup 替代了 data 和 methods 等等。因此，需要花费一些时间来学习新语法和调整现有代码。

2.2. 插件和库的兼容性

一些 Vue 2.x 插件和库可能不兼容 Vue 3，需要更新或替换。在升级之前，需要检查你的依赖项是否与 Vue 3 兼容，并相应地做出调整。

2.3. TypeScript 支持

Vue 3 对 TypeScript 的支持更加完善，因此如果你的项目中使用了 TypeScript，升级到 Vue 3 可能需要一些额外的注意事项，例如更改类型定义和配置文件等等。

2.4. 升级顺序

如果你的项目依赖于其他库或框架，例如 Vuex、Vue Router 等等，需要在升级 Vue 3 之前先升级这些库或框架，以确保整个项目能够顺利升级。

2.5. 测试和调试

在升级之后，需要进行一些测试和调试来确保项目的稳定性和正确性。这可能需要一些额外的时间和精力。

在这里插入图片描述

3.官方文档和其他参考资源：

·如果你想自己去了解，那么我整理了这些资源可能对你有帮助

Vue 3 官方文档：https://v3.cn.vuejs.org/ ↗
Vue 3 Composition API 文档：https://v3.vuejs.org/guide/composition-api-introduction.html ↗
Vue 3 TypeScript 支持文档：https://v3.vuejs.org/guide/typescript-support.html ↗
Vue CLI 3 文档：https://cli.vuejs.org/ ↗
Vue Router 4 文档：https://next.router.vuejs.org/ ↗
Vuex 4 文档：https://next.vuex.vuejs.org/ ↗
Vue 3 源码：https://github.com/vuejs/vue-next ↗
Vue 3 生态系统：https://v3.ecosystem.vuejs.org/ ↗
Vue Mastery 课程：https://www.vuemastery.com/courses/vue-3-essentials ↗
Vue.js 开发者社区：https://forum.vuejs.org/ ↗