Nuxt 3.10

v3.10 紧随 v3.9 之后发布，同样包含了丰富的功能与修复。以下是几个亮点。

✨ 预渲染时实验性的共享 asyncData

在预渲染路由时，我们最终可能会重复获取相同的数据。在 Nuxt 2 中，可以创建一个“payload”，只获取一次即可在每个页面中访问（当然，在 Nuxt 3 中也可以手动实现这一点——请参阅 这篇文章）。

通过 #24894，我们现在能够在预渲染您的网站时自动为您完成此操作。您的 useAsyncData 和 useFetch 调用将在网站的多次渲染之间进行去重和缓存。

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

🆔 SSR 安全且可访问的唯一 ID 创建

我们现在提供了一个用于生成 SSR 安全的唯一 ID 的 useId 组合式函数（#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 钩子允许模块作者做一些事情，比如添加自定义的 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）。

这还伴随着一个新的组合式函数 refreshCookie，它允许手动刷新 Cookie 值，例如在执行请求之后。

🏥 检测反模式

在此版本中，我们还发布了一系列用于检测潜在 Bug 和性能问题的功能。

• 如果在服务器端使用 setInterval，我们现在会抛出错误（#25259）。
• 如果数据获取组合式函数被错误使用（#25071），例如在插件或 setup 上下文之外使用，我们会发出警告（仅限开发环境）。
• 如果您没有使用 <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，Nuxt 将不会应用视图过渡（#22292）。您可以设置 viewTransition: 'always'；然后由您决定是否尊重用户的偏好。

🏗️ 构建时路由元数据

现在可以在构建时访问在 definePageMeta 中定义的路由元数据，从而允许模块和钩子修改和更改这些值（#25210）。

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

请尝试使用此功能，并让我们知道它的效果如何。我们希望在未来的版本中提高性能并默认启用此功能，以便像 @nuxtjs/i18n 等模块能够与在 definePageMeta 中设置的路由选项进行更深入的集成。

📦 打包器模块解析

通过 #24837，我们现在开始使用 TypeScript 的 bundler 解析，这应该更贴近我们在 Nuxt 项目中为模块解析子路径导入的实际方式。

“Bundler”模块解析是 Vue 推荐 和 Vite 推荐 的，但不幸的是，仍有许多软件包在其 package.json 中没有正确的入口。

作为其中的一部分，我们在整个生态系统中提交了 85 个 PR 以测试切换默认设置，并识别并修复了一些问题。

如果您需要关闭此行为，您可以这样做。但是，请考虑在该库或模块的仓库中提交一个 Issue（随时可以在其中 @ 我），以便从根源上解决问题。

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

✅ 升级

像往常一样，我们建议您运行以下命令进行升级

npx nuxi upgrade --force

这也将刷新你的 lockfile，并确保你拉取 Nuxt 依赖的其他依赖项（尤其是在 unjs 生态系统中）的更新。

完整发布说明

感谢你阅读到这里！我们希望你喜欢这个新版本。如果你有任何反馈或问题，请告诉我们。

祝您 Nuxting 愉快 ✨