vue2 将渐渐远去

从2016年 vue 发布了 2.0 版本，这个构建用户界面的渐进式框架已经陪我们走过几多寒暑。而随着 vue-next 今年的正式发布，vue2 也渐渐进入维护末期。

根据在 Github vue-next release中的原文：

At the same time, we have started planning for 2.7, which will be the last planned minor release of the 2.x release line. 2.7 will be backporting compatible improvements from v3, and emit warnings on usage of APIs that are removed/changed in v3 to help with potential migration. We are planning to work on 2.7 in Q1 2021, which will directly become LTS upon release with an 18 months maintenance lifespan.

vue2 只剩下最后一个2.7版本和18个月的维护时间[1]。

而且会在提示中不断的用 removed/changed in v3来提醒我们 vue-next 的存在。

vue-next 携惊喜而来

新一代的 vue-next 为我们带了许多惊喜[2]：

Performance：性能比vue2.x快1.2～2倍。
Tree shaking support：支持按需编译，体积更小。
Composition API：组合API，类似React Hooks。
Custom Renderer API：暴露了自定义渲染API。
Fragment，Teleport（Protal），Suspense：新增三个组件
Better TypeScript support：更好的支持 Typescript。
Composition API：方便整理 option 代码。“一旦你自己开始整理，可以写出更高质量的代码。”

面对颠覆性的实现，与如此多的新功能，也让技术有所追求的人跃跃欲试，我们应该高喊：“vue-next 我们学得动，也学得懂”。

升级 vue-next 没有想象中那么困难

其实周围许多的开发伙伴们也希望能够尽早的进入 vue-next 的生态，也希望用 vue-next 能够带给自己系统更好的性能，更小的体积。

这与 vue 团队的想法不谋而合，@vue/compat 是 Vue 3 的迁移构建，它提供了可配置的 Vue 2 兼容行为。

使用它进行 Vue 2 项目的迁移步骤如下（参考其 github 中的升级步骤）：

如果当前项目使用的废弃的具名、作用域插槽（slot），请先升级到 vue 2.6 的语法。
安装 @vue/compat
修改构建中 @vue/compat 的别名为 vue，从而使用 compat 模式选项。
修复编译的错误、警告，当然这就是一系列工程了，具体可以参考中提到的一系列修改点。

如果系统运行正常，可以将编译选项 vue2 模式改为 vue-next 模式。

vite.config.js

template: {
    compilerOptions: {
        compatConfig: {
            MODE: 3
        }
    }

依次手动修改 vue-compat 尚不支持的非兼容性变更以及 vuex、vue-router 等周边生态组件的升级

Github：github.com/vuejs/vue-n…

参考文档：v3.vuejs.org/guide/migra…

让你的项目迈向 vue-next 更快一步

通过 @vue/compat，vue 社区已经通过浏览及告警给我们指出了绝大部分我们需要修改的点，如何修改呢？

那么 vue-next 官方迁移文档了解一下[3]，但是大体浏览了一下，几十条迁移内容，顿时感觉到头发又要不保，能不能让我们升级的工作再简化一些？

vue-codemod 快速迁移不是梦

vuejs 官方团队正好提供了帮助我们进行自动化升级的工具 vuejs/codemod，vue-codemod 是一组代码迁移脚本，可以自动将部分 Vue 2 语法的代码转换为 Vue 3 语法。不过vue-codemod目前所支持的转换规则并不多，比如不支持 template 区域的转换。我们fork 了该仓库 originjs/vue-codemod，并进行进一步特性开发，以支持更高程度的自动转换。

originjs/vue-codemod 采用 JSCodeshift 与 vue-eslint-parser 分别将 script 和 template 区域代码解析为 AST，并进行一系列的相关操作，将代码中的大部分 Vue 2 语法转换为 Vue 3 语法，然后通过少量的手动修改，以帮助开发者快速实现 Vue 2 到 Vue 3 的平滑迁移。

注意：vue-codemod 工具会自动覆盖源代码中需要迁移的代码，所以在运行之前，注意备份！注意备份！注意备份！

1. 安装

npm install @originjs/vue-codemod -g
//or
yarn global add @originjs/vue-codemod

2. 执行所有规则

npx vue-codemod src -a

src 指定的是扫描的文件路径，-a 表示执行所有的规则转换

3. 执行单条规则

npx vue-codemod src -t new-global-api

src 指定的是扫描的文件路径，-t new-global-api 表示只执行 new-global-api 这条规则。

4. 规定输出格式

npx vue-codemod src -a -f log

-f 命令用于规定统计输出格式，可选参数为为 detail 、table、log，在没有指定参数的情况下默认为 detail。

以下是-f table的输出样例：

╔═══════════════════════════════╤═══════╗
║ Rule Names                    │ Count ║
╟───────────────────────────────┼───────╢
║ new-component-api             │   1   ║
║ new-global-api                │   1   ║
║ vue-router-v4                 │   1   ║
║ vuex-v4                       │   1   ║
║ new-directive-api             │   1   ║
║ remove-vue-set-and-delete     │   2   ║
║ rename-lifecycle              │   2   ║
║ add-emit-declarations         │   1   ║
║ tree-shaking                  │   1   ║
║ slot-attribute                │   1   ║
║ slot-default                  │   1   ║
║ slot-scope-attribute          │   1   ║
║ v-for-template-key            │   2   ║
║ v-else-if-key                 │   3   ║
║ transition-group-root         │   1   ║
║ v-for-v-if-precedence-changed │   1   ║
║ remove-listeners              │   1   ║
║ remove-v-on-native            │   1   ║
╚═══════════════════════════════╧═══════╝