Vue2.7正式发布，终于可以在Vue2项目中使用Vue3的特性了，真香~

前言

尽管现在 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 没有独立的应用范围）

• ❌