共计 2701 个字符，预计需要花费 7 分钟才能阅读完成。
前言
只管当初 Vue3 是默认版本，但还有许多用户、相干库、周边生态应用的是 Vue2，且因为依赖兼容性、浏览器反对要求或没有足够的带宽降级，导致不得不持续应用 Vue2。难道 Vue3 公布了这么多“真香”的个性，咱们 Vue2 的用户与我的项目就只能眼巴巴地看着？当然不是！有一个好消息是，前两天 Vue2.7 正式公布了。在此版本中，从 Vue3 向后移植了一些最重要的性能，以便 Vue2 用户也能够从中受害。
注释
一、向后移植的性能
在 Vue2.7 中，Vue3 的很多性能将会向后移植，以便于 Vue2 的很多我的项目能够应用 Vue3 的一些很好用的新个性，例如：
- Composition API（组合式 API）
- SFC < script setup>（单文件组件 < script setup>）
- SFC CSS v-bind（单文件组件 CSS 中的 v-bind）
此外，还反对以下 API：
- defineComponent()：具备改良的类型推断（与 Vue.extend 相比）；
- h()、useSlot()、useAttrs()、useCssModules()；
- set()、del() 和 nextTick() 在 ESM 构建中也作为命名导出提供；
- 反对 emits，但仅用作类型查看用处（不影响运行时行为）。
Vue2.7 还反对在模板表达式中应用 ESNext 语法。应用构建零碎时，编译后的模板渲染函数将通过为一般 JavaScript 配置的雷同 loaders / plugins。这意味着如果为.js 文件配置了 Babel，它也将利用于 SFC 模板中的表达式。
当初你终于能够在模版外面用可选链 formData?.userInfo?.userId，而不必写一长串 &&，也能够间接应用零合并操作符 ?? 来给变量赋一个默认值了，而不须要用可能导致 bug 的或 ||。
留神：在 ESM 构建中，这些 API 作为命名导出提供（仅限于命名导出）
import {ref, reactive} from 'vue'而在 UMD 和 CJS 构建中，这些 API 作为全局 Vue 对象上的属性裸露。
二、与 Vue3 的差别
Composition API 应用 Vue2 的基于 getter/setter 的响应式零碎进行反向移植，以确保浏览器兼容性。这意味着与 Vue3 的基于 proxy 的零碎存在一些重要的行为差别：
- 所有 Vue2 更改检测正告依然实用；
- reactive()、ref() 和 shallowReactive() 将间接转换原始对象而不是创立代理：
// 在 2.7 中可行，在 3.x 中不可行
reactive(foo) === foo- readonly() 的确创立了一个独自的对象，但它不会跟踪新增加的属性并且不适用于数组；
- 防止在 reactive() 中应用数组作为 root 值，因为如果没有属性拜访，则不会跟踪数组的变动（这将导致正告）；
- Reactivity APIs 疏忽带有 symbol 键的属性。
此外，以下性能是未移植的：
- ❌ createApp()（Vue2 没有独立的利用范畴）
- ❌ <script setup> 中的顶层 await（Vue2 不反对异步组件初始化）
- ❌ 模板表达式中的 TypeScript 语法（与 Vue2 解析器不兼容）
- ❌ Reactivity transform（仍处于试验阶段）
- ❌ options 组件不反对 expose 选项（但 <script setup> 反对 defineExpose()）。
三、我的项目降级
应用脚手架 Vue Cli 或者构建工具 Webpack 搭建的我的项目，需注意一下几点：
（1）将本地 @vue/cli-xxx 依赖项降级到次要版本范畴内的最新版本（如果实用）
- 对于 v4：~4.5.18
- 对于 v5：~5.0.6
（2）将 Vue 降级到 ^2.7.0。还能够从依赖项中删除 vue-template-compiler，因为在 2.7 中不再须要它。留神：如果正在应用 @vue/test-utils，可能须要临时将它保留在依赖项中，然而这个要求也将在新版本的 Test Utils 中被勾销。
原 ^2.6.14 我的项目
编辑 package.json，降级为 ^2.7.0，删除 vue-template-compiler
（3）查看包管理器 lock 文件以确保以下依赖项满足版本要求。它们可能是 package.json 中未列出的传递依赖项：
- vue-loader: ^15.10.0
- vue-demi: ^0.13.1
如果没有，须要删除 node_modules 和 lock 文件并重新安装，以确保它们降级到最新版本。
（4）如果之前应用过 @vue/composition-api，请将其导入更新为 vue。留神，插件导出的一些 API，例如 createApp，未在 2.7 中移植。
（5）如果在应用 <script setup> 时遇到未应用的变量的 lint 谬误，请将 eslint-plugin-vue 更新到最新版本 (9+)。
（6）Vue 2.7 的 SFC 编译器当初应用 PostCSS8。PostCSS8 应该向后兼容大多数插件，但如果以前应用只能与 PostCSS7 一起应用的自定义 PostCSS 插件，降级可能会导致问题。在这种状况下，须要将相干插件降级到与 PostCSS8 兼容的版本。
尝试在我的项目应用 Vue3 个性
<template>
<div>
<h1 :style="styleObj">{{msg}}</h1>
<button @click="changeColor"> 切换色彩 </button>
</div>
</template>
<script setup>
import {toRefs, reactive} from 'vue'
let props = defineProps({msg: String})
let {msg} = toRefs(props)
console.log(msg,'msg')
let styleObj = reactive({color:'blue'})
console.log(styleObj,'styleObj')
let changeColor = function(){if(styleObj.color === 'blue'){styleObj.color = 'red'} else {styleObj.color = 'blue'}
}
</script>控制台无报错，页面成果
控制台打印响应性变量
四、后续反对
Vue2.7 是 Vue2.x 的最终主要版本。在这个版本之后，Vue2 进入了 LTS（长期反对），从当初开始继续 18 个月，并且将不再接管新性能。这意味着 Vue2 将在 2023 年底完结其生命周期。这应该为大多数生态系统迁徙到 Vue3 提供短缺的工夫。
总结
Vue2.7 的正式公布，预示着你在本人的 Vue2 我的项目中能够应用局部 Vue3 的个性了，连忙试试吧！
