Nuxt 3.10

v3.10紧随v3.9之后发布，但它包含了众多的新功能和修复。以下是一些亮点。

✨ 当预渲染时实验性地共享asyncData

当预渲染路由时，我们可能会反复地再次获取同样的数据。在Nuxt 2中，可以创建一种‘负载’，这种负载可以获取一次，然后在每个页面中访问（当然，这在Nuxt 3中也可以手动做到 - 见本文章）。

借助#24894，我们现在能在预渲染你的网站时自动为你做到这一点。你的useAsyncData和useFetch调用将在你的站点的渲染之间被取消重复并进行缓存。

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

🆔 SSR-safe 可访问的唯一ID生成

我们现在提供一个用于生成SSR-safe唯一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内置项(#25028)，就像我们通过Nitro在服务器上在部署至非Node环境时所做的一样。

这意味着，在你的客户端代码中，你可以从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。如果浏览器支持这个，那么当cookie被更新时这会被用来更新useCookie的值(#25198)。

这也配备了一个新的可组合，refreshCookie，允许手动刷新cookie的值，比如在执行请求之后。

🏥 Detecting anti-patterns

在这个发行版本中，我们也发布了一系列的功能来检测潜在的bug和性能问题。

• 如果在服务器上使用了 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 (#22292)的设置，Nuxt 将不会应用视图转换. 你可以设置 viewTransition: 'always';然后，尊重用户的偏好就取决于你了。

🏗️ 构建时路由元数据

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

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

请试验这个功能，并让我们知道这对你来说效果如何。我们希望在将来的版本中提高性能并默认启用此功能，以便类似 @nuxtjs/i18n 等模块可以与在 definePageMeta中设置的路由选项进行更深层次的集成。

📦 打包器模块解析

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

‘Bundler’模块解析是 Vue 和 Vite推荐的, 但不幸的是，仍然有很多包在他们的 package.json中没有正确的条目。

作为此次改动的一部分，我们开放了 85 个 PRs 来测试默认的切换， 并发现并修复了一些问题。

如果你需要关闭此行为，你可以这样做。然而，考虑到这个问题，你可以提出一个问题（随意在其中@我），在库或模块的回购上，以便可以从源头解决。

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

✅ 升级

和平时一样，我们建议升级的方式是运行：

npx nuxi upgrade --force

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

完整发布说明

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

愉快的 Nuxting ✨