代號為Naruto的Vue 2.7正式釋出功能詳解

2022-07-04 14:00:47

引言

Vue 正式釋出了 2.7 版本，版本名稱為 Naruto，即火影忍者。

儘管現在 Vue 3 是預設版本，但由於仍有許多使用者由於依賴相容性、瀏覽器支援要求或沒有足夠的頻寬升級而不得不繼續使用 Vue 2。在 Vue 2.7 中，從 Vue 3 向後移植了一些最重要的功能，以便 Vue 2 使用者也可以從中受益。

向後移植的功能

此外，還支援以下 API：

defineComponent()：具有改進的型別推斷（與Vue.extend相比）；
h()、useSlot()、useAttrs()、useCssModules()；
set()、del() 和 nextTick() 在 ESM 構建中也作為命名匯出提供。

Vue 2.7 還支援在模板表示式中使用 ESNext 語法。使用構建系統時，編譯後的模板渲染函數將通過為普通 JavaScript 設定的相同 loaders / plugins。這意味著如果為.js檔案設定了 Babel，它也將應用於 SFC 模板中的表示式。

注意事項

在 ESM 構建中，這些 API 作為命名匯出提供（僅限於命名匯出）：

import Vue, { ref } from 'vue'
Vue.ref // undefined, 改用命名匯出

在 UMD 和 CJS 構建中，這些 API 作為全域性 Vue 物件上的屬性暴露。

與 Vue 3 的行為差異

Composition API 使用 Vue 2 的基於 getter/setter 的響應式系統進行反向移植，以確保瀏覽器相容性。這意味著與 Vue 3 的基於 proxy 的系統存在一些重要的行為差異：

所有 Vue 2 更改檢測警告仍然適用；
reactive()、ref() 和 shallowReactive() 將直接轉換原始物件而不是建立代理：

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

readonly() 確實建立了一個單獨的物件，但它不會跟蹤新新增的屬性並且不適用於陣列；
避免在 reactive() 中使用陣列作為 root 值，因為如果沒有屬性存取，則不會跟蹤陣列的變化（這將導致警告）；
Reactivity APIs 忽略帶有 symbol 鍵的屬性。

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

❌ createApp()（Vue 2 沒有獨立的應用範圍）
❌ <script setup> 中的頂層 await（Vue 2 不支援非同步元件初始化）
❌ 模板表示式中的 TypeScript 語法（與 Vue 2 解析器不相容）
❌ Reactivity transform（仍處於試驗階段）
❌ options 元件不支援 expose 選項（但 <script setup> 支援 defineExpose()）。

升級指南

Vue CLI / webpack

（1）將本地 @vue/cli-xxx 依賴項升級到主要版本範圍內的最新版本（如果適用）：

對於 v4：~4.5.18
對於 v5：~5.0.6

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

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

vue-loader: ^15.10.0
vue-demi: ^0.13.1

如果沒有，需要刪除 node_modules 和 lock 檔案並重新安裝，以確保它們升級到最新版本。

（4）如果之前使用過 @vue/composition-api，請將其匯入更新為 vue。注意，外掛匯出的一些 API，例如 createApp，未在 2.7 中移植。

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

（6）Vue 2.7 的 SFC 編譯器現在使用 PostCSS 8。 PostCSS 8 應該向後相容大多數外掛，但如果以前使用只能與 PostCSS 7 一起使用的自定義 PostCSS 外掛，升級可能會導致問題。在這種情況下，需要將相關外掛升級到與 PostCSS 8 相容的版本。

Vite

Vue2.7 對 Vite 的支援是通過一個新外掛提供的：@vitejs/plugin-vue2。這個新外掛需要 Vue 2.7 或更高版本並取代現有的 vite-plugin-vue2。

注意，新外掛不處理特定於 Vue 的 JSX / TSX transform，這是有意的。 Vue 2 JSX / TSXtransform應該在一個單獨的專用外掛中處理，該外掛將很快提供。

Volar 相容性

Vue 2.7 提供了改進的型別定義，因此不再需要安裝 @vue/runtime-dom 來支援 Volar 模板型別推斷。現在只需要在 tsconfig.json 中進行以下設定：

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

Devtools 支援

Vue Devtools 6.2.0 增加了對檢查 2.7 Composition API 狀態的支援，但擴充套件可能仍需要幾天時間在各個釋出平臺上通過稽核。

2.7 版本的影響

Vue 2.7 是 Vue 2.x 的最終次要版本。在這個版本之後，Vue 2 進入了 LTS（長期支援），從現在開始持續 18 個月，並且將不再接收新功能。這意味著 Vue 2 將在 2023 年底結束其生命週期。這應該為大多數生態系統遷移到 Vue 3 提供充足的時間。

額外細節

在準備此版本時，Vue 團隊將 Vue 2 程式碼庫從 Flow 移植到了 TypeScript，這是基於核心團隊成員 @pikax 的努力。這樣更容易重用 Vue 3 中的程式碼，併為移植的 API 自動生成型別定義。除此之外，還將單元測試從 Karma + Jasmine 移至 Vitest，從而大大提高了維護 DX 和 CI 的穩定性。

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

以上就是代號為Naruto的Vue 2.7正式釋出功能詳解的詳細內容，更多關於Vue2.7 Naruto功能的資料請關注it145.com其它相關文章！