前言
尽管现在 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 没有独立的运用范围）
-
❌
-
❌ 模板表达式中的 TypeScript 语法（与 Vue2 解析器不兼容）
-
❌ Reactivity transform（仍处于实验阶段）
-
❌ options 组件不支撑 expose 选项（但
三、项目升级
运用脚手架 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）假如在运用
（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 的特性了，赶紧试试吧！
