Vue 2.7 现已进入 Beta 阶段 | Vue 点滴

我们很高兴地宣布 Vue 2.7 现已进入 Beta 阶段。

尽管 Vue 3 现在是默认版本，但我们理解仍然有很多用户由于依赖兼容性、浏览器支持要求或仅仅是升级带宽不足而不得不停留在 Vue 2 上。在 Vue 2.7 中，我们从 Vue 3 中移植了一些最重要的功能，以便 Vue 2 用户也能从中受益。

移植的功能

此外，以下 API 也受支持

defineComponent() 具有改进的类型推断（与 Vue.extend 相比）
h()、useSlot()、useAttrs()、useCssModules()
set()、del() 和 nextTick() 也作为 ESM 构建中的命名导出提供。
emits 选项也受支持，但仅用于类型检查目的（不影响运行时行为）
2.7 还支持在模板表达式中使用 ESNext 语法。当使用构建系统时，编译后的模板渲染函数将通过为普通 JavaScript 配置的相同加载器/插件。这意味着如果您为 .js 文件配置了 Babel，它也将应用于 SFC 模板中的表达式。

关于 API 暴露的说明

在 ESM 构建中，这些 API 作为命名导出（并且仅作为命名导出）提供
js
```
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() 将直接转换原始对象，而不是创建代理。这意味着
js
```
// true in 2.7, false in 3.x
reactive(foo) === foo
```
readonly() 确实创建了一个单独的对象，但它不会跟踪新添加的属性，并且不适用于数组。
避免在 reactive() 中使用数组作为根值，因为没有属性访问，数组的变异将不会被跟踪（这将导致警告）。
响应式 API 忽略具有符号键的属性。

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

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

Beta 采用指南

2.7 目前处于 Beta 阶段，可能还存在一些问题。请通过选择加入 Beta 版来帮助我们测试其稳定性。以下是操作方法

Vue CLI

将本地 @vue/cli-xxx 依赖项升级到您主要版本范围内的最新版本
- ~4.5.18 用于 v4
- ~5.0.6 用于 v5
将 vue 升级到 v2-beta，或固定到特定版本（截至本文撰写时的最新 Beta 版为 2.7.0-beta.3）。您也可以从依赖项中删除 vue-template-compiler - 它在 2.7 中不再需要。
如果您之前使用过 @vue/composition-api，请将来自它的导入更新为 vue。

选择加入 vue-loader v15 Beta 版。由于 vue-loader 是 @vue/cli-service 的传递依赖项，您需要强制您的包管理器显式使用 Beta 版。当它稳定后，强制解析将不再需要。

对于 npm（>=8.3.0），请在 package.json 中使用 overrides 字段。

如果您使用的是 Vue CLI v4

json

{
  "overrides": {
    "vue-loader": "^15.10.0-beta.6"
  }
}

如果您使用的是 Vue CLI v5

json

{
  "overrides": {
    "@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
  }
}

对于 yarn，请在 package.json 中使用 resolutions 字段。

如果您使用的是 Vue CLI v4

json

{
  "resolutions": {
    "vue-loader": "^15.10.0-beta.6"
  }
}

如果您使用的是 Vue CLI v5

json

{
  "resolutions": {
    "@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
  }
}

对于 pnpm，请使用 pnpm.overrides

如果您使用的是 Vue CLI v4

json

{
  "pnpm": {
    "overrides": {
      "vue-loader": "^15.10.0-beta.6"
    }
  }
}

如果您使用的是 Vue CLI v5

json

{
  "pnpm": {
    "overrides": {
      "@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
    }
  }
}

如果您之前使用过任何依赖于 vue-demi 的库（例如 VueUse 或 Pinia），您可能需要删除锁定文件并进行新的 npm 安装以升级到最新版本的 vue-demi。
2.7 的 SFC 编译器现在使用 PostCSS 8（从 7 升级）。PostCSS 8 应该与大多数插件向后兼容，但升级可能会导致问题，如果您之前使用的是只能与 PostCSS 7 一起使用的自定义 PostCSS 插件。在这种情况下，您需要将相关插件升级到其与 PostCSS 8 兼容的版本。

Vite

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

请注意，新插件不处理特定于 Vue 的 JSX/TSX 转换，这是故意的。Vue 2 JSX/TSX 转换应该在单独的专用插件中处理。

Volar 兼容性

2.7 附带改进的类型定义，因此不再需要安装 @vue/runtime-dom 只是为了获得 Volar 模板类型推断支持。您现在只需要在 tsconfig.json 中进行以下配置

json

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

2.7 版本发布的影响

2.7 稳定版计划在 2022 年 6 月底发布。如前所述，它将是 Vue 2.x 的最后一个次要版本。一旦 2.7 作为稳定版发布，Vue 2 将不再接收新功能，并将进入持续 18 个月的 LTS（长期支持）阶段。

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

移植的功能 ​

关于 API 暴露的说明 ​

与 Vue 3 的行为差异 ​

Beta 采用指南 ​

Vue CLI ​

Vite ​

Volar 兼容性 ​

2.7 版本发布的影响 ​

移植的功能

关于 API 暴露的说明

与 Vue 3 的行为差异

Beta 采用指南

Vue CLI

Vite

Volar 兼容性

2.7 版本发布的影响