原副标题：Vue2.7正式宣布正式宣布发布，总算能在Vue2工程项目中采用Vue3的优点了
序言
虽然那时 Vue3 是预设版，但还有很多使用者、有关库、邻近自然生态采用的是 Vue2，且由于倚赖相容性、应用程序全力支持明确要求或没有足够多的频宽升级换代，引致不得已继续采用 Vue2。何况 Vue3 正式宣布发布了那么多“真香”的优点，我们 Vue2 的使用者与工程项目就根本无法心满意足地看著？总之不是！有两个坏消息是，前不久 Vue2.7 正式宣布正式宣布发布了。在此版中，从 Vue3 向后移殖了很多最重要的机能，以期 Vue2 使用者也能由此受惠。
节录
一、向后移殖的机能
在 Vue2.7 中，Vue3 的很多机能Sonbhadra向后移殖，以期于 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 的优点了，赶紧试试吧！
