1 月 30 日，Nuxt.js 3.10 正式發(fā)布。該版本的更新亮點(diǎn)如下：

• 預(yù)渲染時(shí)共享asyncData（實(shí)驗(yàn)性）
• SSR 安全且可訪問(wèn)的唯一 ID 生成
• 擴(kuò)展 app/router.options
• 客戶端 Node.js 支持
• 更好的 cookie 響應(yīng)性
• 細(xì)粒度視圖轉(zhuǎn)換支持
• 構(gòu)建時(shí)路由元數(shù)據(jù)
• 構(gòu)建工具模塊解析

預(yù)渲染時(shí)共享 asyncData

當(dāng)我們預(yù)渲染路由（即預(yù)先生成HTML內(nèi)容）時(shí)，由于每個(gè)頁(yè)面都是獨(dú)立渲染的，如果我們沒(méi)有采取適當(dāng)?shù)拇胧?，可能?huì)導(dǎo)致在每個(gè)頁(yè)面中都重新獲取相同的數(shù)據(jù)。這會(huì)導(dǎo)致不必要的API調(diào)用和可能的性能問(wèn)題。

在 Nuxt 2 中，可以創(chuàng)建一個(gè)數(shù)據(jù)集，這個(gè)數(shù)據(jù)集可以在多個(gè)頁(yè)面中被訪問(wèn)和重用。這樣，只需要獲取一次數(shù)據(jù)，就可以在多個(gè)頁(yè)面中使用它。但這是需要手動(dòng)設(shè)置的。

在 Nuxt 3 中，開(kāi)發(fā)者可以繼續(xù)使用useAsyncData和useFetch這樣的鉤子來(lái)獲取數(shù)據(jù)。但通過(guò) v3.10 的改進(jìn)，Nuxt 3 現(xiàn)在能夠自動(dòng)處理數(shù)據(jù)的去重和緩存。這意味著，當(dāng)預(yù)渲染多個(gè)頁(yè)面時(shí)，如果這些頁(yè)面需要相同的數(shù)據(jù)，Nuxt 3會(huì)自動(dòng)確保這些數(shù)據(jù)只被獲取一次，并在多個(gè)頁(yè)面之間共享。這樣，開(kāi)發(fā)者就不需要手動(dòng)設(shè)置數(shù)據(jù)的共享和緩存了。

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

SSR 安全且可訪問(wèn)的唯一 ID 生成

在 v3.10版本中，提供了一個(gè) useId 組合式函數(shù)，用于生成 SSR 安全的唯一 ID。這有助于創(chuàng)建更易于訪問(wèn)的應(yīng)用界面。

<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>

擴(kuò)展 app/router.options

如今，模塊開(kāi)發(fā)者可以輕松地注入自定義的router.options。借助全新的pages:routerOptions鉤子，他們能實(shí)現(xiàn)諸多功能，如自定義 **scrollBehavior**，或動(dòng)態(tài)調(diào)整路由設(shè)置。

客戶端 Node.js 支持

現(xiàn)在，Nuxt 已實(shí)驗(yàn)性地支持在客戶端代碼中為關(guān)鍵的Node.js內(nèi)置功能提供polyfill。這意味著，當(dāng)你在編寫(xiě)客戶端代碼時(shí)，可以直接從Node.js的內(nèi)置模塊導(dǎo)入功能，就像在服務(wù)器端使用Nitro一樣。但是，與服務(wù)器端不同，我們不會(huì)為你全局地注入任何內(nèi)容，以避免不必要地增加你的代碼包的大小。你需要根據(jù)你的需求在需要的地方進(jìn)行導(dǎo)入。

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({})

這應(yīng)該會(huì)讓那些正在使用沒(méi)有適當(dāng)瀏覽器支持的庫(kù)的用戶的工作變得更輕松。但是，由于增加包大小的風(fēng)險(xiǎn)，強(qiáng)烈建議用戶如果可能的話，選擇其他替代方案。

更好的 cookie 響應(yīng)性

現(xiàn)在允許選擇使用 CookieStore。如果瀏覽器支持，那么在更新 cookies 時(shí)，將使用 CookieStore 替代 BroadcastChannel 來(lái)響應(yīng)地更新 useCookie 值。此外，還提供了一個(gè)新的函數(shù) refreshCookie，允許手動(dòng)刷新 cookie 值，例如在執(zhí)行請(qǐng)求之后。

細(xì)粒度視圖轉(zhuǎn)換支持

現(xiàn)在，可以使用 definePageMeta 函數(shù)在每個(gè)頁(yè)面上精細(xì)控制視圖轉(zhuǎn)換的支持。

在使用之前，請(qǐng)確保啟用了實(shí)驗(yàn)性的視圖轉(zhuǎn)換支持功能。

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    viewTransition: false
  }
})

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

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

如果用戶的瀏覽器偏好減少動(dòng)畫(huà)，Nuxt 將不會(huì)應(yīng)用視圖轉(zhuǎn)換?？梢詫?nbsp;viewTransition 設(shè)置為 'always'，但最終還是要尊重用戶的偏好。

構(gòu)建時(shí)路由元數(shù)據(jù)

現(xiàn)在可以在構(gòu)建時(shí)訪問(wèn)在 definePageMeta 中定義的路由元數(shù)據(jù)，允許模塊和鉤子函數(shù)修改和更改這些值。

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

未來(lái)的版本中，默認(rèn)情況下將啟用此功能，以提高性能，并支持諸如 @nuxtjs/i18n 等模塊與在 definePageMeta 中設(shè)置的路由選項(xiàng)更深入地集成。

構(gòu)建工具模塊解析

Nuxt 團(tuán)隊(duì)最近對(duì)模塊的解析方式進(jìn)行了優(yōu)化。通過(guò)啟用 TypeScript 的構(gòu)建工具解析，更準(zhǔn)確地模擬了在 Nuxt 項(xiàng)目中解決子路徑導(dǎo)入模塊的實(shí)際過(guò)程。

這種“構(gòu)建工具”模塊解析方式受到 Vue 和 Vite 的推薦，但遺憾的是，許多包的 package.json 文件中并沒(méi)有正確配置相關(guān)項(xiàng)。作為改進(jìn)措施的一部分，我們?cè)谡麄€(gè)生態(tài)系統(tǒng)中提出了 85 個(gè) PR，用于測(cè)試切換默認(rèn)解析方式，并修復(fù)了一些問(wèn)題。

可以通過(guò)以下方式來(lái)關(guān)閉此行為：

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

升級(jí)

可以通過(guò)以下方式來(lái)升級(jí)最新版本：

nuxi upgrade --force

這也將刷新 lockfile，并確保獲取 Nuxt 所依賴的其他依賴項(xiàng)的更新，尤其是在 unjs 生態(tài)系統(tǒng)中的更新。