Vue 2 最后之舞“鴻鵠挽歌”
大家好,這里是大家的林語冰。老粉都知道,我們之前已經(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
- 將本地 @vue/cli-xxx 依賴升級到您的主版本范圍的最新版本(如果適用的話):
- cli v4 對應(yīng) ~4.5.18
- cli v5 對應(yīng) ~5.0.6
- 將 vue 升級到 ^2.7.0。您還可以從依賴中移除 vue-template-compiler —— 在 Vue 2.7 中不再需要它。
注意:如果您使用 @vue/test-utils,那么需要將 vue-template-compiler 保留在依賴中,因為 test-utils 依賴有且僅有在此軟件包中暴露的某些 API。
- 檢查您的包管理器的 lockfile,確保下述依賴滿足版本要求。它們可能是 package.json 中未列出的傳遞依賴。
vue-loader: ^15.10.0
vue-demi: ^0.13.1
如果沒有,您將需要刪除 node_modules 和 lockfile,并重新執(zhí)行安裝,確保它們升級到最新版本。
- 如果您之前使用過 @vue/composition-api,請將其導(dǎo)入更新為 vue。請注意,插件導(dǎo)出的某些 API,比如 createApp,并未在 Vue 2.7 中移植。
- 如果您在使用 <script setup> 時遭遇未使用變量的報錯,請將 eslint-plugin-vue 更新到最新版本 (9+)。
- 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