前言

盡管現(xiàn)在 Vue3 是默認(rèn)版本，但還有許多用戶、相關(guān)庫(kù)、周邊生態(tài)使用的是 Vue2，且由于依賴兼容性、瀏覽器支持要求或沒有足夠的帶寬升級(jí)，導(dǎo)致不得不繼續(xù)使用 Vue2。難道 Vue3 發(fā)布了這么多“真香”的特性，我們 Vue2 的用戶與項(xiàng)目就只能眼巴巴地看著？當(dāng)然不是！有一個(gè)好消息是，前兩天 Vue2.7 正式發(fā)布了。在此版本中，從 Vue3 向后移植了一些最重要的功能，以便 Vue2 用戶也可以從中受益。

正文

一、向后移植的功能

在 Vue2.7 中，Vue3 的很多功能將會(huì)向后移植，以便于 Vue2 的很多項(xiàng)目可以使用 Vue3 的一些很好用的新特性，例如：

• Composition API （組合式 API）

• SFC < script setup> （單文件組件 < script setup>）

• SFC CSS v-bind （單文件組件 CSS 中的 v-bind）

此外，還支持以下 API：

• defineComponent()：具有改進(jìn)的類型推斷（與Vue.extend相比）；

• h()、useSlot()、useAttrs()、useCssModules()；

• set()、del() 和 nextTick() 在 ESM 構(gòu)建中也作為命名導(dǎo)出提供；

• 支持 emits，但僅用作類型檢查用途（不影響運(yùn)行時(shí)行為）。

Vue2.7 還支持在模板表達(dá)式中使用 ESNext 語(yǔ)法。使用構(gòu)建系統(tǒng)時(shí)，編譯后的模板渲染函數(shù)將通過為普通 JavaScript 配置的相同 loaders / plugins。這意味著如果為.js文件配置了 Babel，它也將應(yīng)用于 SFC 模板中的表達(dá)式。

現(xiàn)在你終于可以在模版里面用可選鏈 formData?.userInfo?.userId，而不用寫一長(zhǎng)串 && ，也可以直接使用零合并操作符 ?? 來(lái)給變量賦一個(gè)默認(rèn)值了，而不需要用可能導(dǎo)致 bug 的或 ||。

注意：在 ESM 構(gòu)建中，這些 API 作為命名導(dǎo)出提供（僅限于命名導(dǎo)出）

import?{?ref,?reactive?}?from?'vue'


而在 UMD 和 CJS 構(gòu)建中，這些 API 作為全局 Vue 對(duì)象上的屬性暴露。

二、與 Vue3 的差異

Composition API 使用 Vue2 的基于 getter/setter 的響應(yīng)式系統(tǒng)進(jìn)行反向移植，以確保瀏覽器兼容性。這意味著與 Vue3 的基于 proxy 的系統(tǒng)存在一些重要的行為差異：

• 所有 Vue2 更改檢測(cè)警告仍然適用；

• reactive()、ref() 和 shallowReactive() 將直接轉(zhuǎn)換原始對(duì)象而不是創(chuàng)建代理：

//?在2.7中可行，在3.x中不可行
reactive(foo)?===?foo


• readonly() 確實(shí)創(chuàng)建了一個(gè)單獨(dú)的對(duì)象，但它不會(huì)跟蹤新添加的屬性并且不適用于數(shù)組；

• 避免在 reactive() 中使用數(shù)組作為 root 值，因?yàn)槿绻麤]有屬性訪問，則不會(huì)跟蹤數(shù)組的變化（這將導(dǎo)致警告）；

• Reactivity APIs 忽略帶有 symbol 鍵的屬性。

此外，以下功能是未移植的：

• ? createApp()（Vue2 沒有獨(dú)立的應(yīng)用范圍）

• ? < script setup> 中的頂層 await（Vue2 不支持異步組件初始化）

• ? 模板表達(dá)式中的 TypeScript 語(yǔ)法（與 Vue2 解析器不兼容）

• ? Reactivity transform（仍處于試驗(yàn)階段）

• ? options 組件不支持 expose 選項(xiàng)（但< script setup> 支持 defineExpose()）。

三、項(xiàng)目升級(jí)

使用腳手架 Vue Cli 或者構(gòu)建工具 Webpack 搭建的項(xiàng)目，需注意一下幾點(diǎn)：

（1）將本地 @vue/cli-xxx 依賴項(xiàng)升級(jí)到主要版本范圍內(nèi)的最新版本（如果適用）

• 對(duì)于 v4：~4.5.18

• 對(duì)于 v5：~5.0.6

（2）將 Vue 升級(jí)到 ^2.7.0。還可以從依賴項(xiàng)中刪除 vue-template-compiler，因?yàn)樵?2.7 中不再需要它。注意：如果正在使用 @vue/test-utils，可能需要暫時(shí)將它保留在依賴項(xiàng)中，但是這個(gè)要求也將在新版本的 Test Utils 中被取消。

原 ^2.6.14 項(xiàng)目

編輯 package.json，升級(jí)為 ^2.7.0，刪除 vue-template-compiler

（3）檢查包管理器 lock 文件以確保以下依賴項(xiàng)滿足版本要求。它們可能是 package.json 中未列出的傳遞依賴項(xiàng)：

• vue-loader: ^15.10.0

• vue-demi: ^0.13.1

如果沒有，需要?jiǎng)h除 node_modules 和 lock 文件并重新安裝，以確保它們升級(jí)到最新版本。

（4）如果之前使用過 @vue/composition-api，請(qǐng)將其導(dǎo)入更新為 vue。注意，插件導(dǎo)出的一些 API，例如 createApp，未在 2.7 中移植。

（5）如果在使用< script setup> 時(shí)遇到未使用的變量的 lint 錯(cuò)誤，請(qǐng)將 eslint-plugin-vue 更新到最新版本 (9+)。

（6）Vue 2.7 的 SFC 編譯器現(xiàn)在使用 PostCSS8。PostCSS8 應(yīng)該向后兼容大多數(shù)插件，但如果以前使用只能與 PostCSS7 一起使用的自定義 PostCSS 插件，升級(jí)可能會(huì)導(dǎo)致問題。在這種情況下，需要將相關(guān)插件升級(jí)到與 PostCSS8 兼容的版本。

嘗試在項(xiàng)目使用 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>


控制臺(tái)無(wú)報(bào)錯(cuò)，頁(yè)面效果

控制臺(tái)打印響應(yīng)性變量

四、后續(xù)支持

Vue2.7 是 Vue2.x 的最終次要版本。在這個(gè)版本之后，Vue2 進(jìn)入了 LTS（長(zhǎng)期支持），從現(xiàn)在開始持續(xù) 18 個(gè)月，并且將不再接收新功能。這意味著 Vue2 將在 2023 年底結(jié)束其生命周期。這應(yīng)該為大多數(shù)生態(tài)系統(tǒng)遷移到 Vue3 提供充足的時(shí)間。

總結(jié)

Vue2.7 的正式發(fā)布，預(yù)示著你在自己的 Vue2 項(xiàng)目中可以使用部分 Vue3 的特性了，趕緊試試吧！