---
title: "Nuxt 3.10"
description: "Nuxt 3.10 已发布 - 充满了功能和修复。以下是一些亮点。"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-10"
---
# Nuxt 3.10

> Nuxt 3.10 已发布 - 充满了功能和修复。以下是一些亮点。

v3.10 在 v3.9 之后推出，但它充满了功能和修复。以下是一些亮点。

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

在预渲染路由时，我们可能会反复获取相同的数据。在 Nuxt 2 中，可以创建一个“payload”，可以获取一次然后在每个页面中访问（在 Nuxt 3 中当然也可以手动执行此操作 - 参见[此文章](https://roe.dev/blog/shared-data-nuxt-generate)）。

通过[#24894](https://github.com/nuxt/nuxt/pull/24894)，在预渲染网站时我们现在可以为您自动执行此操作。您的[`useAsyncData`](https://nuxt.zhcndoc.com/docs/api/composables/use-async-data)和[`useFetch`](https://nuxt.zhcndoc.com/docs/api/composables/use-fetch)调用将在网站的渲染之间进行去重和缓存。

```ts [nuxt.config.ts]
export defineNuxtConfig({
  experimental: {
    sharedPrerenderData: true
  }
})
```

::important
特别重要的是，确保数据的任何唯一键始终可以解析到相同的数据。例如，如果您使用`useAsyncData`获取与特定页面相关的数据，则应提供一个与该数据唯一匹配的键。(`useFetch`应该自动执行此操作。)
::

::read-more{to="https://nuxt.zhcndoc.com/docs/guide/going-further/experimental-features#sharedprerenderdata"}
::

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

我们现在提供了一个`useId`组合，用于生成安全的 SSR 唯一 ID（[#23368](https://github.com/nuxt/nuxt/pull/23368)）。这使得您的应用程序中创建更可访问的界面变得更加容易。例如：

```vue [components/MyForm.vue]
<script setup>
const emailId = useId()
const passwordId = useId()
</script>

<template>
  <form>
    <label :for="emailId">电子邮件</label>
    <input
      :id="emailId"
      name="email"
      type="email"
    >
    <label :for="passwordId">密码</label>
    <input
      :id="passwordId"
      name="password"
      type="password"
    >
  </form>
</template>
```

### ✍️ 扩展 `app/router.options`

现在模块作者可以注入自己的`router.options`文件（[#24922](https://github.com/nuxt/nuxt/pull/24922)）。新的`pages:routerOptions`钩子允许模块作者执行例如添加自定义`scrollBehavior`或在运行时增强路由的操作。

::read-more{to="https://nuxt.zhcndoc.com/docs/guide/going-further/custom-routing#router-options"}
::

### :icon{name="i-vscode-icons-file-type-node"} 客户端 Node.js 支持

我们现在支持（实验性的）填充关键的 Node.js 内置模块（[#25028](https://github.com/nuxt/nuxt/pull/25028)），就像我们在部署到非 Node 环境时通过 Nitro 在服务器上所做的那样。

这意味着，在客户端代码中，您可以直接从 Node 内置模块中导入（支持`node:`和 node 导入）。然而，不会为您全局注入任何内容，以避免不必要地增加包大小。您可以根据需要导入它们。

```ts [some-file.ts]
import { Buffer } from 'node:buffer'
import process from 'node:process'
```

或者提供自己的填充代码，例如，在 Nuxt 插件中。

```ts [plugins/node.client.ts]
import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})
```

这将使没有适当浏览器支持的库的用户更轻松地使用。然而，由于增加包大小的风险，如果有可能，我们强烈建议用户**选择其他替代方案**。

### 🍪 更好的 cookie 响应性

现在我们允许您选择使用[CookieStore](https://developer.mozilla.org/en-US/docs/Web/API/CookieStore)。如果浏览器支持，更新 cookie 时会使用 CookieStore 而不是 BroadcastChannel 来响应地更新`useCookie`的值（[#25198](https://github.com/nuxt/nuxt/pull/25198)）。

这也配套了一个新的组合式函数`refreshCookie`，它允许手动刷新 cookie 的值，例如在执行请求后。

::read-more{to="https://nuxt.zhcndoc.com/docs/api/utils/refresh-cookie"}
::

### 🏥 检测反模式

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

- 如果在服务器上使用`setInterval`，我们将抛出错误（[#25259](https://github.com/nuxt/nuxt/pull/25259)）。
- 我们（仅在开发模式下）会发出警告，如果错误使用了数据获取的组合式函数（[#25071](https://github.com/nuxt/nuxt/pull/25071)），例如在插件或设置上下文之外使用。
- 我们（仅在开发模式下）会发出警告，如果您没有使用`<NuxtPage />`但启用了`vue-router`的集成（[#25490](https://github.com/nuxt/nuxt/pull/25490)）。(`RouterView`不能单独使用。)

### 🧂 精细的视图过渡支持

现在可以使用`definePageMeta`在每个页面上控制视图过渡的支持（[#25264](https://github.com/nuxt/nuxt/pull/25264)）。

您需要首先启用实验性的视图过渡支持：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    // 如果需要，您可以全局禁用它们（默认情况下它们已启用）
    viewTransition: false
  }
})
```

然后可以选择性地开启或关闭：

```vue [pages/index.vue]
<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>
```

最后，如果用户的浏览器匹配了`prefers-reduced-motion: reduce`，Nuxt 将不会应用视图过渡效果（[#22292](https://github.com/nuxt/nuxt/pull/22292)）。您可以设置`viewTransition: 'always'`，然后由您来尊重用户的首选项。

### 🏗️ 构建时路由元数据

现在可以在构建时访问在`definePageMeta`中定义的路由元数据，允许模块和钩子修改和更改这些值（[#25210](https://github.com/nuxt/nuxt/pull/25210)）。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  experimental: {
    scanPageMeta: true
  }
})
```

请尝试使用并告诉我们它对您的工作有何改进。我们希望提高性能并在以后的版本中默认启用该功能，以便像`@nuxtjs/i18n`和其他模块能够更深入地与在`definePageMeta`中设置的路由选项进行集成。

### 📦 模块解析

通过[#24837](https://github.com/nuxt/nuxt/pull/24837)，我们现在选择使用 TypeScript 的`bundler`解析，这更接近于在 Nuxt 项目中解析模块的实际方式。

‘Bundler’模块解析是由 Vue（[推荐](https://github.com/vuejs/tsconfig/blob/mainz/tsconfig.json#L24-L26)）和 Vite（[推荐](https://vite.zhcndoc.com/guide/performance.html#reduce-resolve-operations)）推荐的，但不幸的是，仍然有许多包在其`package.json`中没有正确的条目。

作为此举的一部分，我们在整个生态系统中开启了 85 个 PR，以测试切换默认方式，并识别和修复了一些问题。

如果您需要关闭此行为，可以这样做。但是，请考虑在库或模块的存储库中提出问题（请随时在问题中标记我），以便能够在来源处解决该问题。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false
  }
})
```

## ✅ 升级

如往常一样，我们推荐运行：

```sh
npx nuxi upgrade --force
```

这将刷新您的锁定文件，并确保您拉取了 Nuxt 依赖的其他依赖项的更新，特别是在非 Node 生态系统中。

## 完整的发布说明

::read-more{to="https://github.com/nuxt/nuxt/releases/tag/v3.10.0" icon="i-simple-icons-github" target="_blank"}
阅读 Nuxt `v3.10.0` 的完整发布说明。
::

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

**祝您使用 Nuxt 的愉快 ✨**


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.