向上兼容！Vue 2.7 正式發(fā)布，支持了 Vue 3 部分功能！代號(hào)為火影忍者

以下文章來(lái)源于前端充電寶 ，作者CUGGZ


大家好，我是 零一。

今天，Vue 正式發(fā)布了 2.7 版本， 版本名稱為 Naruto，即火影忍者。

盡管現(xiàn)在 Vue 3 是默認(rèn)版本，但由于仍有許多用戶由于依賴兼容性、瀏覽器支持要求或沒(méi)有足夠的帶寬升級(jí)而不得不繼續(xù)使用 Vue 2。在 Vue 2.7 中，從 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用戶也可以從中受益。

向后移植的功能
Composition API
SFC <script setup>
SFC CSS v-bind
此外，還支持以下 API：

defineComponent()：具有改進(jìn)的類型推斷（與Vue.extend相比）；
h()、useSlot()、useAttrs()、useCssModules()；
set()、del() 和 nextTick() 在 ESM 構(gòu)建中也作為命名導(dǎo)出提供。
Vue 2.7 還支持在模板表達(dá)式中使用 ESNext 語(yǔ)法。使用構(gòu)建系統(tǒng)時(shí)，編譯后的模板渲染函數(shù)將通過(guò)為普通 JavaScript 配置的相同 loaders / plugins。這意味著如果為.js文件配置了 Babel，它也將應(yīng)用于 SFC 模板中的表達(dá)式。

注意事項(xiàng)
在 ESM 構(gòu)建中，這些 API 作為命名導(dǎo)出提供（僅限于命名導(dǎo)出）：
import Vue, { ref } from 'vue'

Vue.ref // undefined, 改用命名導(dǎo)出
在 UMD 和 CJS 構(gòu)建中，這些 API 作為全局 Vue 對(duì)象上的屬性暴露。
與 Vue 3 的行為差異
Composition API 使用 Vue 2 的基于 getter/setter 的響應(yīng)式系統(tǒng)進(jìn)行反向移植，以確保瀏覽器兼容性。這意味著與 Vue 3 的基于 proxy 的系統(tǒng)存在一些重要的行為差異：

所有 Vue 2 更改檢測(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)槿绻麤](méi)有屬性訪問(wèn)，則不會(huì)跟蹤數(shù)組的變化（這將導(dǎo)致警告）；
Reactivity APIs 忽略帶有 symbol 鍵的屬性。
此外，以下功能是未移植的：

? createApp()（Vue 2 沒(méi)有獨(dú)立的應(yīng)用范圍）
? <script setup> 中的頂層 await（Vue 2 不支持異步組件初始化）
? 模板表達(dá)式中的 TypeScript 語(yǔ)法（與 Vue 2 解析器不兼容）
? Reactivity transform（仍處于試驗(yàn)階段）
? options 組件不支持 expose 選項(xiàng)（但 <script setup> 支持 defineExpose()）。






升級(jí)指南
Vue CLI / webpack
（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 中被取消。

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

vue-loader: ^15.10.0
vue-demi: ^0.13.1
如果沒(méi)有，需要?jiǎng)h除 node_modules 和 lock 文件并重新安裝，以確保它們升級(jí)到最新版本。

（4）如果之前使用過(guò) @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)在使用 PostCSS 8。PostCSS 8 應(yīng)該向后兼容大多數(shù)插件，但如果以前使用只能與 PostCSS 7 一起使用的自定義 PostCSS 插件，升級(jí)可能會(huì)導(dǎo)致問(wèn)題。在這種情況下，需要將相關(guān)插件升級(jí)到與 PostCSS 8 兼容的版本。

Vite
Vue2.7 對(duì) Vite 的支持是通過(guò)一個(gè)新插件提供的：@vitejs/plugin-vue2。這個(gè)新插件需要 Vue 2.7 或更高版本并取代現(xiàn)有的 vite-plugin-vue2。

注意，新插件不處理特定于 Vue 的 JSX / TSX transform，這是有意的。Vue 2  JSX / TSXtransform應(yīng)該在一個(gè)單獨(dú)的專用插件中處理，該插件將很快提供。

Volar 兼容性
Vue 2.7 提供了改進(jìn)的類型定義，因此不再需要安裝 @vue/runtime-dom 來(lái)支持 Volar 模板類型推斷?，F(xiàn)在只需要在 tsconfig.json 中進(jìn)行以下配置：

{
  // ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}
Devtools 支持
Vue Devtools 6.2.0 增加了對(duì)檢查 2.7 Composition API 狀態(tài)的支持，但擴(kuò)展可能仍需要幾天時(shí)間在各個(gè)發(fā)布平臺(tái)上通過(guò)審核。

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

額外細(xì)節(jié)
在準(zhǔn)備此版本時(shí)，Vue 團(tuán)隊(duì)將 Vue 2 代碼庫(kù)從 Flow 移植到了 TypeScript，這是基于核心團(tuán)隊(duì)成員 @pikax 的努力。這樣更容易重用 Vue 3 中的代碼，并為移植的 API 自動(dòng)生成類型定義。除此之外，還將單元測(cè)試從 Karma + Jasmine 移至 Vitest，從而大大提高了維護(hù) DX 和 CI 的穩(wěn)定性。

原文：https://blog.vuejs.org/posts/vue-2-7-naruto.html




作者：CUGGZ

歡迎關(guān)注微信公眾號(hào) ：前端印象