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

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

圖片

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

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

圖片

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

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

免責(zé)聲明

本文屬于是語(yǔ)冰的直男翻譯了屬于是，略有刪改，僅供粉絲參考，英文原味版請(qǐng)傳送 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 選項(xiàng)也支持，但能且僅能用于類型檢查（不影響運(yùn)行時(shí)行為）

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

API 暴露的注意事項(xiàng)

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

import Vue, { ref } from 'vue'

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

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

與 Vue 3 的行為差異

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

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

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

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

此外，下述功能明確沒(méi)有移植：

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

升級(jí)指南

Vue CLI / webpack

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

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

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

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

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

vue-loader: ^15.10.0

vue-demi: ^0.13.1

如果沒(méi)有，您將需要?jiǎng)h除 node_modules 和 lockfile，并重新執(zhí)行安裝，確保它們升級(jí)到最新版本。

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

Vite

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

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

Volar 兼容性

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

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

開(kāi)發(fā)者工具支持

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

Vue 2.7 的影響

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

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

額外細(xì)節(jié)

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

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

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