vue.js|Vue 2.7 is Now in Beta 前端|javascript

前言：今天，Vue 创始人尤雨溪刚刚正式发布了 Vue 2.x 最后一个版本：Vue 2.7，代号 “Naruto”（火影忍者）。
尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。
博客地址：尤雨溪博客
向后植入的功能：

Composition API
SFC
SFC css v-bind

此外，还支持以下 API：

defineComponent()具有改进的类型推断（与Vue.extend)
h(), , ,useSlot()useAttrs()useCssModules()
【vue.js|Vue 2.7 is Now in Beta】set()，并且还作为 ESM 构建中的命名导出提供。del()nextTick()

该选项也受支持，但仅用于类型检查目的（不影响运行时行为）emits
2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时，编译的模板渲染函数将通过为普通JavaScript配置的相同加载器/插件。这意味着，如果您已为文件配置了 Babel，则它也适用于 SFC 模板中的表达式。.js
API 暴露注意事项:

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

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

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

与 Vue 3 的行为差异: 组合 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 忽略带有符号键的属性。

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

? createApp()（Vue 2 没有独立的应用范围）
? 顶层awaitin （Vue 2 不支持异步组件初始化）
? 模板表达式中的 TypeScript 语法（与 Vue 2 解析器不兼容）
? 反应性变换（仍处于试验阶段）
?expose选项组件不支持选项（但defineExpose()在中支持）。

Beta 采用指南 2.7 目前处于 beta 阶段，可能仍有粗糙的边缘。请选择加入测试版，帮助我们测试其稳定性。就是这样：
Vue CLI 1.将本地依赖项升级@vue/cli-xxx到您的主要版本范围内的最新版本：

~4.5.18对于 v4
~5.0.6对于 v5
2.升级vue到v2-beta或固定到特定版本（撰写本文时的最新测试版是2.7.0-beta.3）。您还可以vue-template-compiler从依赖项中删除 - 在 2.7 中不再需要它。
3.如果您以前使用过@vue/composition-api，请将其导入更新为vue。
4.选择加入vue-loaderv15 测试版。由于vue-loader是的传递依赖@vue/cli-service，您需要强制您的包管理器显式使用 beta 版本。当它变得稳定时，将不再需要强制解析。
对于npm(>=8.3.0) ，使用package.json.

如果使用 Vue CLI v4：

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

如果使用 Vue CLI v5：

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

对于yarn，请使用 resolutions中的分辨率字段package.json。

如果使用 Vue CLI v4：

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

如果使用 Vue CLI v5：

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

对于pnpm，使用pnpm.overrides：

如果使用 Vue CLI v4：

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

如果使用 Vue CLI v5：

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

5.如果您之前使用过任何依赖的库vue-demi（例如 VueUse 或 Pinia），您可能需要删除 lockfile 并执行全新的 npm install 以升级到最新版本的vue-demi.
6.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 Compatibility 兼容性 2.7 发布了改进的类型定义，因此不再需要安装@vue/runtime-domVolar 模板类型推断支持。您现在只需要以下配置tsconfig.json：

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

2.7 版本的影响 2.7 stable 计划于 2022 年 6 月底左右登陆。如前所述，它将是 Vue 2.x 的最终次要版本。一旦 2.7 稳定发布，Vue 2 将不再接收新功能，并将进入持续 18 个月的 LTS（长期支持）。
这意味着Vue 2 将在 2023 年底结束生命周期。我们认为这应该为大多数生态系统迁移到 Vue 3 提供充足的时间。但是，我们也知道可能有团队或项目无法在此时间线之前升级，但仍需要满足安全性和合规性要求。
那我们如何升级我们的vue2.6.10的项目呢？ 1.首先删除node_modules和package-lock.json
2. vue-cli脚手架升级,修改package.json

// package.json { "dependencies":{ "vue":"2.7.0" "devDependencies": { "@vue/cli-plugin-babel": "^5.0.0", "@vue/cli-plugin-eslint": "^5.0.6", "@vue/cli-service": "^5.0.0", } }

删除vue-template-compiler
然后重新npm install,这样确保了文件依赖的正确性
3.如果之前使用过 @vue/composition-api，请将其导入更新为 vue。注意，插件导出的一些 API，例如 createApp，未在 2.7 中移植。
4.如果在使用时遇到未使用的变量的 lint 错误，请将 eslint-plugin-vue 更新到最新版本 (9+)。
5.Vue 2.7 的 SFC 编译器现在使用 PostCSS8。PostCSS8 应该向后兼容大多数插件，但如果以前使用只能与 PostCSS7 一起使用的自定义 PostCSS 插件，升级可能会导致问题。在这种情况下，需要将相关插件升级到与 PostCSS8 兼容的版本。
但是前面也说了2023以后就不维护了，所以还没有学vue3的同学赶紧学起来吧~