Vue 2 最后之舞“天鹅挽歌”

大家好，这里是大家的林语冰。老粉都知道，我们之前已经在《Vue 2 将死》中已经提及 Vue 2 今年年底将全面停止维护，且最终版即将发布，只打补丁，不再增量更新任何新功能。

圣诞节前夕，平安夜之际，Vue 团队正式官宣 ------ Vue 2 最后一个补丁版本 Vue@2.7.16 正式发布，版本代号"Swan Song"（天鹅挽歌）。

地球人都知道，去年 Vue 2 官宣了最后一个次版本 Vue@2.7.x，如今 Vue 2 官宣最后一个补丁版本 Vue@2.7.16，也算是为 Vue 2 的最后之舞画上惊叹号！此去经年，再无 Vue 2。

虽然但是，前端踏足之地，Vue 亦生生不息，此乃"Vue 之意志"。故本期《前端翻译计划》一起来重温 Vue@2.7 的官方博客，为 Vue 生态的未来规划未雨绸缪。

今天我们十分鸡冻地官宣，Vue 2.7（版本代号"火影忍者"）正式发布！

尽管 Vue 3 现在已经是默认版本，但我们特别理解，由于依赖兼容性、浏览器支持的要求或带宽不足无法升级，仍然有一大坨用户被迫滞留在 Vue 2。在 Vue 2.7 中，我们向后移植了 Vue 3 中的某些特色功能，Vue 2 爱好者也可以有福同享。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考，英文原味版请传送 Vue 2.7 "Naruto" Released。

向后移植的功能

组合式 API
SFC <script setup>
SFC CSS v-bind

此外，下述 API 也支持：

defineComponent() 优化了类型接口（与 Vue.extend 相比）
h()/useSlot()/useAttrs()/useCssModules()
set()/del()/nextTick() 也在 ESM 构建中作为命名导出提供。
emits 选项也支持，但能且仅能用于类型检查（不影响运行时行为）

Vue 2.7 还支持在模板表达式中使用 ESNext 语法。当使用构建系统时，编译后的模板渲染函数将经由为普通 JS 配置的相同加载器/插件处理。这意味着，如果您为 .js 文件配置了 Babel，它也将应用于 SFC 模板中的表达式。

API 暴露的注意事项

在 ESM 构建中，这些 API 作为命名导出提供（且仅限命名导出）：

js 复制代码

import Vue, { ref } from 'vue'

Vue.ref // undefined，请换用命名导出的方式

在 UMD 和 CJS 构建中，这些 API 作为全局 Vue 对象的属性暴露。
当与外部化的 CJS 打包构建时，打包器应该能在外部化 CJS 构建时处理 ESM 的互操作。

与 Vue 3 的行为差异

组合式 API 诉诸 Vue 2 getter/setter 筑基的响应性系统向后移植，确保浏览器的兼容性。这意味着，与 Vue 3 proxy 筑基的系统存在若干重要的行为差异：

所有 Vue 2 变更检测警告仍然适用。
reactive()/ref()/shallowReactive() 将直接转换源对象而不是创建代理。这意味着：

js 复制代码

// Vue 2.7 中结果为 true，Vue 3.x 中结果为 false
reactive(foo) === foo

readonly() 确实创建了一个独立的对象，但它不会追踪新增的属性，且数组无法奏效。
避免使用数组作为 reactive() 中的根值（root values），因为如果没有属性访问，那么就不会追踪数组的变更（这将导致警告）。
响应性 API 会无视 symbol 键的属性。

此外，下述功能明确没有移植：

❌ createApp()（Vue 2 没有隔离的 App 作用域）
❌ <script setup> 中的顶层 await（Vue 2 不支持异步组件初始化）
❌ 模板表达式中的 TS语法（与 Vue 2 解析器不兼容）
❌ 响应性转换（当时仍处于实验阶段）
❌ 选项组件不支持 expose 选项（但 <script setup> 支持 defineExpose()）。

升级指南

Vue CLI / webpack

将本地 @vue/cli-xxx 依赖升级到您的主版本范围的最新版本（如果适用的话）：

cli v4 对应 ~4.5.18
cli v5 对应 ~5.0.6

将 vue 升级到 ^2.7.0。您还可以从依赖中移除 vue-template-compiler ------ 在 Vue 2.7 中不再需要它。

注意：如果您使用 @vue/test-utils，那么需要将 vue-template-compiler 保留在依赖中，因为 test-utils 依赖有且仅有在此软件包中暴露的某些 API。

检查您的包管理器的 lockfile，确保下述依赖满足版本要求。它们可能是 package.json 中未列出的传递依赖。
- vue-loader: ^15.10.0
- vue-demi: ^0.13.1

如果没有，您将需要删除 node_modules 和 lockfile，并重新执行安装，确保它们升级到最新版本。

如果您之前使用过 @vue/composition-api，请将其导入更新为 vue。请注意，插件导出的某些 API，比如 createApp，并未在 Vue 2.7 中移植。
如果您在使用 <script setup> 时遭遇未使用变量的报错，请将 eslint-plugin-vue 更新到最新版本 (9+)。
Vue 2.7 的 SFC（单文件组件）编译器现在使用 PostCSS 8（从 PostCSS 7 升级而来）。PostCSS 8 应该向后兼容大多数插件，但如果您之前使用能且仅能与 PostCSS 7 无缝衔接的自定义 PostCSS 插件，升级可能会导致问题。在此情况下，您需要将相关插件升级到兼容 PostCSS 8 的版本。

Vite

Vue 2.7 通过新插件提供对 Vite 的支持：@vitejs/plugin-vue2。这个新插件需要 Vue 2.7 或更高版本，并代替现存的 vite-plugin-vue2。

请注意，新插件不处理 Vue 特定的 JSX/TSX 转换，此乃有意为之。Vite 的 Vue 2 JSX/TSX 转换是在一个单独的专用插件中处理的：@vitejs/plugin-vue2-jsx。

Volar 兼容性

Vue 2.7 优化了类型定义，因此不再需要再仅仅为了支持 Volar 模板类型推断，从而安装 @vue/runtime-dom。您现在需要的是 tsconfig.json 中的下述配置：

json 复制代码

{
  // ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}

开发者工具支持

Vue Devtools 6.2.0 全新支持检查 Vue 2.7 组合式 API 状态，但扩展可能仍需要几天的时间才能在各自的发布平台上经过审核。

Vue 2.7 的影响

如上所述，Vue 2.7 是 Vue 2.x 的最终次版本。此版本发布后，Vue 2 已进入 LTS（长期支持），为期 18 个月，并且将不再接收新功能。这意味着，Vue 2 将于 2023 年 12 月 31 日终止生命周期。

我们相信，这应该为大多数生态系统迁移到 Vue 3 提供了充足的时间。虽然但是，我们也特别理解，可能某些团队或项目无法在此时间线之前升级，但仍需要满足安全性和兼容性要求。我们正在与行业专家合作，为有此类需求的团队提供 Vue 2 的扩展支持 ------ 如果您的团队期望在 2023 年底之后继续 Vue 2 之旅，请务必未雨绸缪，并了解有关 Vue 2 扩展 LTS 的更多细节。

额外细节

在准备此版本的过程中，我们在核心团队成员 @pikax 劳模式打工的基础上，将 Vue 2 代码库从 Flow 移植到了 TS。这使我们更容易复用 Vue 3 中的代码，并为移植的 API 自动生成类型定义。我们还将单元测试从 Karma + Jasmine 迁移至 Vitest，大大提高了维护 DX（开发体验）和 CI（持续集成）的稳定性。

我们要实名感谢在 Vue 2.7 落地之前，社区为其弥合差距所做的努力：

@vue/composition-api 插件，作者：@liximomo
vue-demi，作者：@antfu
vite-plugin-vue2，作者：@underfin

您现在收看的是《前端翻译计划》，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎持续关注前端生态。谢谢大家的点赞，掰掰~