v3.10 紧随 v3.9 之后发布,但它包含了大量特性和修复。以下是一些亮点。
✨ 实验性共享 asyncData
用于预渲染
当预渲染路由时,我们最终可能会重复获取相同的数据。在 Nuxt 2 中,可以创建一个“payload”,它可以被获取一次,然后在每个页面中访问(当然,这在 Nuxt 3 中也可以手动完成 - 请参阅这篇文章)。
通过 #24894,当您预渲染站点时,我们现在能够自动为您执行此操作。您的 useAsyncData
和 useFetch
调用将在您的站点渲染之间进行重复数据删除和缓存。
export defineNuxtConfig({
experimental: {
sharedPrerenderData: true
}
})
useAsyncData
获取与特定页面相关的数据,则应提供唯一匹配该数据的键。(useFetch
应该会自动执行此操作。)🆔 SSR 安全的可访问唯一 ID 创建
我们现在提供一个 useId
composable 用于生成 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 支持
我们现在(实验性地)支持 polyfill 关键的 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。如果浏览器支持,那么这将代替 BroadcastChannel 用于在 cookie 更新时反应式地更新 useCookie
值 (#25198)。
这也与一个新的 composable 配对,refreshCookie
,它允许手动刷新 cookie 值,例如在执行请求之后。
🏥 检测反模式
在此版本中,我们还发布了一系列功能来检测潜在的错误和性能问题。
- 如果在服务器上使用
setInterval
,我们现在将抛出错误 (#25259)。 - 如果数据获取 composable 使用不当 (#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
(#22292),Nuxt 将不会应用视图过渡。您可以设置 viewTransition: 'always'
;那么尊重用户的偏好将由您负责。
🏗️ 构建时路由元数据
现在可以在构建时访问在 definePageMeta
中定义的路由元数据,允许模块和钩子修改和更改这些值 (#25210)。
export default defineNuxtConfig({
experimental: {
scanPageMeta: true
}
})
请尝试使用它,并告诉我们它对您的效果如何。我们希望提高性能,并在未来的版本中默认启用它,以便像 @nuxtjs/i18n
等模块可以提供与在 definePageMeta
中设置的路由选项更深入的集成。
📦 Bundler 模块解析
通过 #24837,我们现在选择加入 TypeScript bundler
解析,它应该更紧密地类似于我们在 Nuxt 项目中解析模块子路径导入的实际方式。
'Bundler' 模块解析是 Vue 推荐的 和 Vite 推荐的,但不幸的是,仍然有很多软件包在其 package.json
中没有正确的条目。
作为其中的一部分,我们在整个生态系统中打开了 85 个 PR,以测试切换默认值,并识别和修复了一些问题。
如果您需要关闭此行为,您可以这样做。但是,请考虑在库或模块的仓库中提出问题(随时标记我),以便可以在源头解决它。
export default defineNuxtConfig({
future: {
typescriptBundlerResolution: false
}
})
✅ 升级
与往常一样,我们升级的建议是运行
npx nuxi upgrade --force
这也将刷新您的 lockfile,并确保您从 Nuxt 依赖的其他依赖项(尤其是在 unjs 生态系统中)中拉取更新。
完整发布说明
感谢您阅读至此!我们希望您喜欢新版本。如果您有任何反馈或问题,请告知我们。
Nuxting 愉快 ✨