大家好，這里是大家的林語冰。老粉都知道，我們之前已經(jīng)在《Vue 2 將死》中已經(jīng)提及 Vue 2 今年年底將全面停止維護，且最終版即將發(fā)布，只打補丁，不再增量更新任何新功能。

圣誕節(jié)前夕，平安夜之際，Vue 團隊正式官宣 —— Vue 2 最后一個補丁版本 Vue@2.7.16 正式發(fā)布，版本代號“Swan Song”（鴻鵠挽歌）。

圖片

地球人都知道，去年 Vue 2 官宣了最后一個次版本 Vue@2.7.x，如今 Vue 2 官宣最后一個補丁版本 Vue@2.7.16，也算是為 Vue 2 的最后之舞畫上驚嘆號！此去經(jīng)年，再無 Vue 2。

雖然但是，前端踏足之地，Vue 亦生生不息，此乃“Vue 之意志”。故本期《前端翻譯計劃》一起來重溫 Vue@2.7 的官方博客，為 Vue 生態(tài)的未來規(guī)劃未雨綢繆。

圖片

今天我們十分雞凍地官宣，Vue 2.7（版本代號“火影忍者”）正式發(fā)布！

盡管 Vue 3 現(xiàn)在已經(jīng)是默認版本，但我們特別理解，由于依賴兼容性、瀏覽器支持的要求或帶寬不足無法升級，仍然有一大坨用戶被迫滯留在 Vue 2。在 Vue 2.7 中，我們向后移植了 Vue 3 中的某些特色功能，Vue 2 愛好者也可以有福同享。

免責聲明

本文屬于是語冰的直男翻譯了屬于是，略有刪改，僅供粉絲參考，英文原味版請傳送 Vue 2.7 "Naruto" Released[1]。

向后移植的功能

• 組合式 API
• SFC <script setup>
• SFC CSS v-bind

此外，下述 API 也支持：

• defineComponent() 優(yōu)化了類型接口（與 Vue.extend 相比）
• h()/useSlot()/useAttrs()/useCssModules()
• set()/del()/nextTick() 也在 ESM 構(gòu)建中作為命名導(dǎo)出提供。
• emits 選項也支持，但能且僅能用于類型檢查（不影響運行時行為）

Vue 2.7 還支持在模板表達式中使用 ESNext 語法。當使用構(gòu)建系統(tǒng)時，編譯后的模板渲染函數(shù)將經(jīng)由為普通 JS 配置的相同加載器/插件處理。這意味著，如果您為 .js 文件配置了 Babel，它也將應(yīng)用于 SFC 模板中的表達式。

API 暴露的注意事項

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

import Vue, { ref } from 'vue'

Vue.ref // undefined，請換用命名導(dǎo)出的方式

• 在 UMD 和 CJS 構(gòu)建中，這些 API 作為全局 Vue 對象的屬性暴露。
• 當與外部化的 CJS 打包構(gòu)建時，打包器應(yīng)該能在外部化 CJS 構(gòu)建時處理 ESM 的互操作。

與 Vue 3 的行為差異

組合式 API 訴諸 Vue 2 getter/setter 筑基的響應(yīng)性系統(tǒng)向后移植，確保瀏覽器的兼容性。這意味著，與 Vue 3 proxy 筑基的系統(tǒng)存在若干重要的行為差異：

• 所有 Vue 2 變更檢測警告仍然適用。
• reactive()/ref()/shallowReactive() 將直接轉(zhuǎn)換源對象而不是創(chuàng)建代理。這意味著：

// Vue 2.7 中結(jié)果為 true，Vue 3.x 中結(jié)果為 false
reactive(foo) === foo

• readonly() 確實創(chuàng)建了一個獨立的對象，但它不會追蹤新增的屬性，且數(shù)組無法奏效。
• 避免使用數(shù)組作為 reactive() 中的根值（root values），因為如果沒有屬性訪問，那么就不會追蹤數(shù)組的變更（這將導(dǎo)致警告）。
• 響應(yīng)性 API 會無視 symbol 鍵的屬性。

此外，下述功能明確沒有移植：

• ? createApp()（Vue 2 沒有隔離的 App 作用域）
• ? <script setup> 中的頂層 await（Vue 2 不支持異步組件初始化）
• ? 模板表達式中的 TS語法（與 Vue 2 解析器不兼容）
• ? 響應(yīng)性轉(zhuǎn)換（當時仍處于實驗階段）
• ? 選項組件不支持 expose 選項（但 <script setup> 支持 defineExpose()）。

升級指南

Vue CLI / webpack

1. 將本地 @vue/cli-xxx 依賴升級到您的主版本范圍的最新版本（如果適用的話）：

• cli v4 對應(yīng) ~4.5.18
• cli v5 對應(yīng) ~5.0.6

2. 將 vue 升級到 ^2.7.0。您還可以從依賴中移除 vue-template-compiler —— 在 Vue 2.7 中不再需要它。

注意：如果您使用 @vue/test-utils，那么需要將 vue-template-compiler 保留在依賴中，因為 test-utils 依賴有且僅有在此軟件包中暴露的某些 API。

3. 檢查您的包管理器的 lockfile，確保下述依賴滿足版本要求。它們可能是 package.json 中未列出的傳遞依賴。

vue-loader: ^15.10.0

vue-demi: ^0.13.1

如果沒有，您將需要刪除 node_modules 和 lockfile，并重新執(zhí)行安裝，確保它們升級到最新版本。

4. 如果您之前使用過 @vue/composition-api，請將其導(dǎo)入更新為 vue。請注意，插件導(dǎo)出的某些 API，比如 createApp，并未在 Vue 2.7 中移植。
5. 如果您在使用 <script setup> 時遭遇未使用變量的報錯，請將 eslint-plugin-vue 更新到最新版本 (9+)。
6. Vue 2.7 的 SFC（單文件組件）編譯器現(xiàn)在使用 PostCSS 8（從 PostCSS 7 升級而來）。PostCSS 8 應(yīng)該向后兼容大多數(shù)插件，但如果您之前使用能且僅能與 PostCSS 7 無縫銜接的自定義 PostCSS 插件，升級可能會導(dǎo)致問題。在此情況下，您需要將相關(guān)插件升級到兼容 PostCSS 8 的版本。

Vite

Vue 2.7 通過新插件提供對 Vite 的支持：@vitejs/plugin-vue2。這個新插件需要 Vue 2.7 或更高版本，并代替現(xiàn)存的 vite-plugin-vue2。

請注意，新插件不處理 Vue 特定的 JSX/TSX 轉(zhuǎn)換，此乃有意為之。Vite 的 Vue 2 JSX/TSX 轉(zhuǎn)換是在一個單獨的專用插件中處理的：@vitejs/plugin-vue2-jsx。

Volar 兼容性

Vue 2.7 優(yōu)化了類型定義，因此不再需要再僅僅為了支持 Volar 模板類型推斷，從而安裝 @vue/runtime-dom。您現(xiàn)在需要的是 tsconfig.json 中的下述配置：

{
  // ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}

開發(fā)者工具支持

Vue Devtools 6.2.0 全新支持檢查 Vue 2.7 組合式 API 狀態(tài)，但擴展可能仍需要幾天的時間才能在各自的發(fā)布平臺上經(jīng)過審核。

Vue 2.7 的影響

如上所述，Vue 2.7 是 Vue 2.x 的最終次版本。此版本發(fā)布后，Vue 2 已進入 LTS（長期支持），為期 18 個月，并且將不再接收新功能。這意味著，Vue 2 將于 2023 年 12 月 31 日終止生命周期。

我們相信，這應(yīng)該為大多數(shù)生態(tài)系統(tǒng)遷移到 Vue 3 提供了充足的時間。雖然但是，我們也特別理解，可能某些團隊或項目無法在此時間線之前升級，但仍需要滿足安全性和兼容性要求。我們正在與行業(yè)專家合作，為有此類需求的團隊提供 Vue 2 的擴展支持 —— 如果您的團隊期望在 2023 年底之后繼續(xù) Vue 2 之旅，請務(wù)必未雨綢繆，并了解有關(guān) Vue 2 擴展 LTS 的更多細節(jié)。

額外細節(jié)

在準備此版本的過程中，我們在核心團隊成員 @pikax 勞模式打工的基礎(chǔ)上，將 Vue 2 代碼庫從 Flow 移植到了 TS。這使我們更容易復(fù)用 Vue 3 中的代碼，并為移植的 API 自動生成類型定義。我們還將單元測試從 Karma + Jasmine 遷移至 Vitest，大大提高了維護 DX（開發(fā)體驗）和 CI（持續(xù)集成）的穩(wěn)定性。

我們要實名感謝在 Vue 2.7 落地之前，社區(qū)為其彌合差距所做的努力：

• @vue/composition-api 插件，作者：@liximomo
• vue-demi，作者：@antfu
• vite-plugin-vue2，作者：@underfin