Nuxt 3.10

v3.10 紧随 v3.9 之后发布，但它包含许多特性和修复。这里是一些亮点。

✨ 实验性共享 asyncData 用于预渲染

当预渲染路由时，我们最终可能会一遍又一遍地重复获取相同的数据。在 Nuxt 2 中，可以创建一个“payload”，它可以被获取一次，然后在每个页面中访问（当然，这在 Nuxt 3 中可以手动完成 - 请参阅这篇文章）。

通过 #24894，我们现在可以在预渲染您的网站时自动为您执行此操作。您的 useAsyncData 和 useFetch 调用将在您网站的渲染之间进行重复数据删除和缓存。

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

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

我们现在提供一个 useId 组合式函数来生成 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 钩子允许模块作者执行诸如添加自定义 scrollBehavior 或添加路由的运行时增强等操作。

客户端 Node.js 支持

我们现在（实验性地）支持对关键的 Node.js 内置组件进行 polyfill (#25028)，就像我们在部署到非 Node 环境时通过 Nitro 在服务器端所做的那样。

这意味着，在您的客户端代码中，您可以直接从 Node 内置组件导入（支持 node: 和 node 导入）。但是，为了避免不必要地增加您的包大小，没有任何内容会全局注入给您。您可以在需要的地方导入它们。

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

或者，例如，在 Nuxt 插件中提供您自己的 polyfill。

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

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

这应该会使使用没有适当浏览器支持的库的用户更容易。但是，由于不必要地增加包大小的风险，我们强烈建议用户尽可能选择其他替代方案。

🍪 更好的 cookie 响应性

我们现在允许您选择使用 CookieStore。如果浏览器支持存在，则当 cookie 更新时，这将取代 BroadcastChannel 来反应性地更新 useCookie 值 (#25198)。

这还附带了一个新的组合式函数 refreshCookie，它允许手动刷新 cookie 值，例如在执行请求之后。

🏥 检测反模式

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

• 如果 setInterval 在服务器上使用，我们现在会抛出错误 (#25259)。
• 如果数据获取组合式函数使用不当（#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 匹配，Nuxt 将不会应用视图过渡 (#22292)。您可以设置 viewTransition: 'always'；那么将由您来尊重用户的偏好。

🏗️ 构建时路由元数据

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

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

请尝试一下，并告诉我们它对您来说效果如何。我们希望提高性能，并在未来版本中默认启用此功能，以便像 @nuxtjs/i18n 这样的模块和其他模块可以提供与在 definePageMeta 中设置的路由选项的更深入集成。

📦 打包器模块解析

通过 #24837，我们现在选择加入 TypeScript bundler 解析，它应该更接近我们在 Nuxt 项目中解析模块子路径导入的实际方式。

“打包器”模块解析是 Vue 推荐的，也是 Vite 推荐的，但不幸的是，仍然有许多包在其 package.json 中没有正确的条目。

作为其中的一部分，我们在整个生态系统中打开了 85 个 PR 来测试切换默认值，并识别和修复了一些问题。

如果您需要关闭此行为，可以这样做。但是，请考虑在库或模块的 repo 中提出问题（请随意标记我），以便可以在源头解决问题。

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

✅ 升级

通常，我们升级的建议是运行

npx nuxi upgrade --force

这也将刷新您的锁定文件，并确保您从 Nuxt 依赖的其他依赖项中提取更新，尤其是在 unjs 生态系统中。

完整发布说明

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

Nuxting 愉快 ✨