新年將至，Vue 的周邊生態也元氣滿滿，Vue/Vite/Nuxt 等等紛紛官宣升級。本期《前端翻譯計劃》共享的是 Nuxt 團隊官方博客的最新升級公告。

Nuxt 3.9 正式升級 —— 此乃 Nuxt 團隊的聖誕禮物，帶來了 Vite 5、交互式服務器組件、全新的組合式函數、全新的加載 API 等等。

我們在 Nuxt 3.9 中集成了一大坨新功能，迫不及待地想讓您體驗一下。

Vite 5

此版本支持 Vite 5 和 Rollup 4。模塊作者可能需要檢查，確保您正在創建的任何 Vite 插件與這些最新版本兼容。

這帶來了一系列重大優化和錯誤修復 —— 請傳送 Vite 變更日志了解詳情。

Vue 3.4 整裝待發

此版本使用最新的 Vue 3.4 候選版測評，並具有利用 Vue 3.4 中的新功能所需的配置，包括在 Nuxt 配置中調試生產環境的水合錯誤（隻需設置 debug: true 極客）。

要利用此優勢，隻需在 Vue 3.4 發佈後，更新您的 Vue 版本，或者優先體驗候選版本：

{
  "dependencies": {
    "nuxt": "3.9.0",
    "vue": "3.4.0-rc.1",
    "vue-router": "latest"
  }
}

交互式服務器組件

此乃一個高度實驗性的更新，但現在可以在 Nuxt 服務器組件中使用交互式組件。除了組件 island 之外，您還需要啟用此新功能：

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true
    }
  }
})

現在，在服務器組件中，您可以使用 nuxt-client 指令指定要進行水合的組件：

我們對此十分雞凍 —— 所以請讓我們知道您如何使用它！

自動服務器優化

我們現在使用 Vite 的新 AST 感知“定義”對服務器端代碼執行更準確的替換，這意味著，下述的代碼不再報錯：

到目前為止，這還不可能實現，因為我們不想冒意外替換 App 非 JS 部分中的普通單詞（比如 document）的風險。但 Vite 的全新 define 功能由 esbuild 提供支持，並且具有語法感知能力，因此我們對啟用此功能充滿信心。不過，如果您需要，您可以選擇禁用：

export default defineNuxtConfig({
  hooks: {
    'vite:extendConfig'(config) {
      delete config.define!.document
    }
  }
})

粒度加載 API

我們現在為 <NuxtLoadingIndicator> 提供了一個新的鉤子築基的系統，其中包括一個 useLoadingIndicator 組合式函數，可讓您控制/停止/啟動加載狀態。如果您願意，還可以連接到 page:loading:start 和 page:loading:end。

在 callOnce 中運行單個事件

有時，您隻想運行代碼一次，無論加載頁面多少次，且如果代碼在服務器上運行，您不想在客戶端上再次運行它。

為此，我們有一個新的工具：callOnce

粉絲請註意，此工具是上下文感知的，因此必須在組件 setup 函數或 Nuxt 插件中調用它，就像其他 Nuxt 組合式函數一樣。

錯誤類型

一段時間以來，useAsyncData 和 useFetch 返回的錯誤類型泛化為 Error。我們顯著優化了其類型可能性，使它們在您實際收到的內容方面更加準確。（舉個栗子，我們使用 h3 createError 工具標準化錯誤，這可以將它們從服務器序列化到客戶端。）

我們嘗試以向後兼容的方式實現類型更改，但您可能會註意到，如果您手動配置這些組合式函數的泛型，那就需要更新泛型。

架構性能

我們在此版本中花了一些時間來進行若幹次級性能優化，因此您應該註意到，有些事情速度更快了。這是一個正在進行的項目，我們有改善 Nuxt 開發服務器初始加載時間的想法。

升級

像往常一樣，我們的升級建議是運行：

nuxi upgrade

作者：人貓神話
鏈接：
https://juejin.cn/post/7317908960757055522