Nuxt 3.10

v3.10 在 v3.9 之後很快就推出了，但它包含許多功能和修復。以下是一些重點。

✨ 實驗性共享 asyncData 用於預渲染

當預渲染路由時，我們可能會不斷重複獲取相同的數據。在 Nuxt 2 中，可以建立一個「payload」，它可以被提取一次，然後在每個頁面中存取（當然，在 Nuxt 3 中也可以手動執行此操作 - 請參閱這篇文章）。

透過#24894，我們現在可以在預渲染網站時為您自動執行此操作。您的useAsyncData 和 useFetch 呼叫將會被去重，並在您網站的渲染之間快取。

export defineNuxtConfig({
  experimental: {
    sharedPrerenderData: true
  }
})

🆔 SSR 安全的可存取唯一 ID 建立

我們現在提供一個 useId composable，用於產生 SSR 安全的唯一 ID (#23368)。這允許在您的應用程式中建立更易於存取的介面。例如

<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 檔案 (#24922)。新的 pages:routerOptions hook 允許模組作者執行諸如新增自訂 scrollBehavior 或新增路由的執行階段增強等操作。

客戶端 Node.js 支援

我們現在（實驗性地）支援對關鍵 Node.js 內建函式進行 polyfill (#25028)，就像我們在部署到非 Node 環境時已經透過 Nitro 在伺服器上所做的那樣。

這表示在您的客戶端程式碼中，您可以直接從 Node 內建函式導入（支援 node: 和 node 導入）。但是，為了避免不必要地增加捆綁包大小，不會為您全域注入任何內容。您可以根據需要導入它們。

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

export default defineNuxtPlugin({})

這應該讓使用沒有適當瀏覽器支援的函式庫的使用者更容易。但是，由於存在不必要地增加捆綁包的風險，如果可能的話，我們強烈建議使用者選擇其他替代方案。

🍪 更好的 Cookie 反應性

我們現在允許您選擇使用 CookieStore。如果存在瀏覽器支援，則會使用它而不是 BroadcastChannel，以便在更新 cookie 時以反應方式更新 useCookie 值 (#25198)。

這還附帶一個新的 composable，refreshCookie，允許手動重新整理 cookie 值，例如在執行請求後。

🏥 偵測反模式

在此版本中，我們還提供了一系列功能來偵測潛在的錯誤和效能問題。

• 如果 setInterval 在伺服器上使用，我們現在會拋出錯誤 (#25259)。
• 如果資料提取 composable 使用不當（#25071），例如在外掛程式或設定內容之外，我們會發出警告（僅在開發中）。
• 如果您沒有使用 <NuxtPage /> 但啟用了 vue-router 整合，我們會發出警告（僅在開發中）(#25490)。(<RouterView /> 不應單獨使用。)

🧂 細緻的檢視轉換支援

現在可以使用 definePageMeta 在每個頁面的基礎上控制檢視轉換支援 (#25264)。

您需要先啟用實驗性檢視轉換支援

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    // you can disable them globally if necessary (they are enabled by default)
    viewTransition: false
  }
})

並且您可以以細緻的方式選擇加入/退出

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

最後，如果使用者的瀏覽器符合 prefers-reduced-motion: reduce (#22292)，Nuxt 將不會應用檢視轉換。您可以設定 viewTransition: 'always'；然後將由您來尊重使用者的偏好。

🏗️ 建置時路由中繼資料

現在可以存取在建置時在 definePageMeta 中定義的路由中繼資料，允許模組和 hook 修改和變更這些值 (#25210)。

export default defineNuxtConfig({
  experimental: {
    scanPageMeta: true
  }
})

請試用此功能，並讓我們知道它如何運作。我們希望提高效能，並在未來的版本中預設啟用此功能，以便像 @nuxtjs/i18n 之類的模組和其他模組可以提供與 definePageMeta 中設定的路由選項更深入的整合。

📦 捆綁器模組解析

透過 #24837，我們現在選擇加入 TypeScript bundler 解析，這應該更接近我們在 Nuxt 專案中解析模組子路徑導入的實際方式。

「捆綁器」模組解析是 Vue 建議和 Vite 建議，但不幸的是，仍然有很多套件在其 package.json 中沒有正確的條目。

作為此工作的一部分，我們在整個生態系統中開啟了 85 個 PR 來測試切換預設值，並識別和修復了一些問題。

如果您需要關閉此行為，您可以這麼做。但是，請考慮在函式庫或模組的儲存庫中提出問題（請隨時在其中標記我），以便可以在來源處解決此問題。

export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false
  }
})

✅ 升級

與往常一樣，我們建議的升級方式是執行

npx nuxi upgrade --force

這也會重新整理您的鎖定檔案，並確保您從 Nuxt 所依賴的其他依賴項（尤其是在 unjs 生態系統中）提取更新。

完整發行說明

感謝您閱讀到這裡！我們希望您喜歡新的版本。如果您有任何回饋或問題，請務必告訴我們。

Nuxting 愉快 ✨