Vue2.7正式发布！代号为：Naruto（火影忍者），原生支持 Composition API +终于可以在Vue2项目中使用Vue3的新特性了，真香~

前言：

今天，Vue 创始人尤雨溪刚刚正式发布了 Vue 2.x 最后一个版本：Vue 2.7，代号 "Naruto"（火影忍者）。

尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。

尤雨溪的博客：

维埃角 (vuejs.org)https://blog.vuejs.org/posts/vue-2-7-naruto.html

按照发布计划，Vue 2.7 是 2.x 的最后一个次要版本，也是 LTS 版本，获得官方提供的 18 个月技术支持。这就意味着，Vue 2 将在 2023 年底结束生命周期。

包含的新功能：

Vue 2.7 从 Vue 3 向后移植了一些最重要的功能，包括：

向后移植功能

• Composition API
• SFC <script setup>
• SFC CSS v-bind

此外，还支持以下 API：

• defineComponent()具有改进的类型推断（与Vue.extend)

• h(), , ,useSlot()useAttrs()useCssModules()

• set()，并且还作为 ESM 构建中的命名导出提供。del()nextTick()

• 该选项也受支持，但仅用于类型检查目的（不影响运行时行为）emits

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

不包含的新功能：

此外，以下功能明确不移植：

• ❌ （Vue 2 没有隔离的应用程序范围）createApp()
• ❌ 顶级 in（Vue 2 不支持异步组件初始化）await<script setup>
• ❌ 模板表达式中的 TypeScript 语法（不兼容 w/ Vue 2 解析器）
• ❌ 反应性变换（仍处于实验阶段）
• ❌ 选项组件不支持选项（但在 中受支持）。exposedefineExpose()<script setup>

有关 API 公开的说明

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

  import Vue, { ref } from 'vue'
  
  Vue.ref // undefined, use named export instead
  

• 在 UMD 和 CJS 版本中，这些 API 公开为全局对象的属性。Vue

• 当与外部化 CJS 构建捆绑在一起时，捆绑商在外部化 CJS 构建时应该能够处理 ESM 互操作。

与 Vue 3 的行为差异

Composition API使用Vue 2的基于getter/setter的反应系统向后移植，以确保浏览器的兼容性。这意味着与 Vue 3 基于代理的系统存在一些重要的行为差异：

• 所有 Vue 2 更改检测警告仍然适用。

• reactive()，将直接转换原始对象，而不是创建代理。这意味着：ref()shallowReactive()

  // true in 2.7, false in 3.x
  reactive(foo) === foo
  

• readonly() 确实会创建一个单独的对象，但它不会跟踪新添加的属性，并且不适用于数组。

• 避免将数组用作 中的根值，因为如果没有属性访问权限，则不会跟踪数组的突变（这将导致警告）。reactive()

• 反应性 API 忽略带有符号键的属性。

升级指南

Vue CLI / webpack

1. 升级本地依赖项主要版本范围内的最新版本（如果适用）：@vue/cli-xxx

   • ~4.5.18对于 v4
   • ~5.0.6对于 v5

2. 升级到 。您也可以从依赖项中删除 - 在 2.7 中不再需要它。vue^2.7.0vue-template-compiler

   注意：如果您使用的是 ，则可能需要暂时将其保留在依赖项中，但此要求也将在新发布的测试实用程序中解除。@vue/test-utils

3. 检查包管理器锁定文件，确保以下依赖项满足版本要求。它们可能是 中未列出的传递依赖项。package.json

   • vue-loader:^15.10.0
   • vue-demi:^0.13.1

   如果没有，您将需要删除和锁定文件并执行全新安装，以确保它们被提升到最新版本。node_modules

4. 如果您以前使用的是@vue/composition-api，请改为从它更新导入。请注意，插件导出的某些 API（例如 ）未在 2.7 中移植。vuecreateApp

5. 如果在使用 时遇到未使用的变量 lint 错误，请更新到最新版本 （9+）。eslint-plugin-vue<script setup>

6. 2.7 的 SFC 编译器现在使用 PostCSS 8（从 7 升级）。PostCSS 8 应该与大多数插件向后兼容，但如果您之前使用的是只能与 PostCSS 7 配合使用的自定义 PostCSS 插件，则升级可能会导致问题。在这种情况下，您需要将相关插件升级到其PostCSS 8兼容版本。

维特

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

请注意，新插件不处理特定于 Vue 的 JSX / TSX 转换，这是有意为之。Vue 2 JSX / TSX 转换应该在一个单独的专用插件中处理，该插件将很快提供。

沃拉尔兼容性

2.7 提供了改进的类型定义，因此不再需要仅针对 Volar 模板类型推断支持进行安装。您现在需要的就是以下配置：@vue/runtime-domtsconfig.json

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

开发工具支持

Vue Devtools 6.2.0 添加了对检查 2.7 Composition API 状态的支持，但这些扩展可能仍然需要几天时间才能在各自的发布平台上进行审查。

2.7 版本的影响

如前所述，2.7 是 Vue 2.x 的最终次要版本。在此版本发布后，Vue 2 已进入 LTS（长期支持），从现在开始持续 18 个月，将不再接收新功能。

这意味着 Vue 2 将在 2023 年底达到生命周期结束。我们相信这应该为大多数生态系统迁移到 Vue 3 提供足够的时间。但是，我们也了解，可能存在一些团队或项目无法在此时间线内升级，同时仍需要满足安全性和合规性要求。我们计划为有此类需求的团队提供对 Vue 2 的扩展支持 - 如果您的团队希望在 2023 年底之后使用 Vue 2，请务必在此处规划 head 并注册您的兴趣。

额外细节

在准备这个版本时，我们将 Vue 2 代码库从 Flow 移植到 TypeScript，这是基于核心团队成员@pikax的英勇努力。这使得我们更容易重用 Vue 3 中的代码，并为移植的 API 自动生成类型定义。我们还将单元测试从 Karma + Jasmine 迁移到了 Vitest，从而大大提高了维护 DX 和 CI 的稳定性。

我们还要对之前的社区努力表示赞赏，这些努力在2.7可用之前弥合了差距：

• @vue/composition-api@liximomo插件
• vue-demi由 @antfu
• vite-plugin-vue2由 @underfin