Nuxt 3.10 正式釋出

1 月 30 日，Nuxt.js 3.10 正式釋出。該版本的更新亮點如下：

預渲染時共享 asyncData

當我們預渲染路由（即預先生成HTML內容）時，由於每個頁面都是獨立渲染的，如果我們沒有采取適當的措施，可能會導致在每個頁面中都重新獲取相同的數據。這會導致不必要的API呼叫和可能的效能問題。

在 Nuxt 2 中，可以建立一個數據集，這個數據集可以在多個頁面中被存取和重用。這樣，只需要獲取一次數據，就可以在多個頁面中使用它。但這是需要手動設定的。

在 Nuxt 3 中，開發者可以繼續使用 useAsyncData 和 useFetch 這樣的勾點來獲取數據。但透過 v3.10 的改進，Nuxt 3 現在能夠自動處理數據的去重和緩存。這意味著，當預渲染多個頁面時，如果這些頁面需要相同的數據，Nuxt 3會自動確保這些數據只被獲取一次，並在多個頁面之間共享。這樣，開發者就不需要手動設定數據的共享和緩存了。

exportdefineNuxtConfig({
experimental:{
sharedPrerenderData:true
}
})


SSR 安全且可存取的唯一 ID 生成

在 v3.10版本中，提供了一個 useId 組合式函式，用於生成 SSR 安全的唯一 ID。這有助於建立更易於存取的套用界面。

<script setup>
const emailId =useId()
const passwordId =useId()
</script>
<template>
<form>
<label :for="emailId">Email</label>
<input
:id="emailId"
name="email"
type="email"
>
<label :for="passwordId">Password</label>
<input
:id="passwordId"
name="password"
type="password"
>
</form>
</template>


擴充套件 app/router.options

如今，模組開發者可以輕松地註入自訂的 router.options 。借助全新的 pages:routerOptions 勾點，他們能實作諸多功能，如自訂 **scrollBehavior** ，或動態調整路由設定。

客戶端 Node.js 支持

現在，Nuxt 已實驗性地支持在客戶端程式碼中為關鍵的Node.js內建功能提供polyfill。這意味著，當你在編寫客戶端程式碼時，可以直接從Node.js的內建模組匯入功能，就像在伺服器端使用Nitro一樣。但是，與伺服器端不同，我們不會為你全域地註入任何內容，以避免不必要地增加你的程式碼包的大小。你需要根據你的需求在需要的地方進行匯入。

import{ Buffer }from'node:buffer'
import process from'node:process'


或者提供自己的 polyfill，例如在 Nuxt 外掛程式中。

import{ Buffer }from'node:buffer'
import process from'node:process'
globalThis.Buffer = Buffer
globalThis.process = process
exportdefaultdefineNuxtPlugin({})


這應該會讓那些正在使用沒有適當瀏覽器支持的庫的使用者的工作變得更輕松。但是，由於增加包大小的風險，強烈建議使用者如果可能的話，選擇其他替代方案。

更好的 cookie 響應性

現在允許選擇使用 CookieStore 。如果瀏覽器支持，那麽在更新 cookies 時，將使用 CookieStore 替代 BroadcastChannel 來響應地更新 useCookie 值。此外，還提供了一個新的函式 refreshCookie ，允許手動重新整理 cookie 值，例如在執行請求之後。

細粒度檢視轉換支持

現在，可以使用 definePageMeta 函式在每個頁面上精細控制檢視轉換的支持。

在使用之前，請確保啟用了實驗性的檢視轉換支持功能。

exportdefaultdefineNuxtConfig({
experimental:{
viewTransition:true
},
app:{
viewTransition:false
}
})


並且可以選擇性地啟用/禁用粒度化的支持：

<script setup lang="ts">
definePageMeta({
viewTransition:false
})
</script>


如果使用者的瀏覽器偏好減少動畫，Nuxt 將不會套用檢視轉換。可以將 viewTransition 設定為 'always' ，但最終還是要尊重使用者的偏好。

構建時路由後設資料

現在可以在構建時存取在 definePageMeta 中定義的路由後設資料，允許模組和勾點函式修改和更改這些值。

exportdefaultdefineNuxtConfig({
experimental:{
scanPageMeta:true
}
})


未來的版本中，預設情況下將啟用此功能，以提高效能，並支持諸如 @nuxtjs/i18n 等模組與在 definePageMeta 中設定的路由選項更深入地整合。

構建工具模組解析

Nuxt 團隊最近對模組的解析方式進行了最佳化。透過啟用 TypeScript 的構建工具解析，更準確地模擬了在 Nuxt 計畫中解決子路徑匯入模組的實際過程。

這種「構建工具」模組解析方式受到 Vue 和 Vite 的推薦，但遺憾的是，許多包的 package.json 檔中並沒有正確配置相關項。作為改進措施的一部份，我們在整個生態系中提出了 85 個 PR，用於測試切換預設解析方式，並修復了一些問題。

可以透過以下方式來關閉此行為：

exportdefaultdefineNuxtConfig({
future:{
typescriptBundlerResolution:false
}
})


升級

可以透過以下方式來升級最新版本：

nuxi upgrade --force


這也將重新整理 lockfile，並確保獲取 Nuxt 所依賴的其他依賴項的更新，尤其是在 unjs 生態系中的更新。

往期推薦