Vue 生态最火的元框架(Nuxt 3.10)-编程知识

在主流的 JS 库/框架生态中，近年来诞生了若干元框架，比如 React 的 Next 和 Remix，Vue 的 Nuxt 等。

不久前，Nuxt团队官宣 Nuxt 3.10 正式发布，截止今天已经发布3.11版本了，更新包含了若干功能和修复。其实 Nuxt 最新的语义化次版本已经到达 3.11 了，对 Vue 生态感兴趣的小伙伴可以持续关注 UP 主，我们会在近未来继续翻译 Nuxt 的官方博客，比较猴急的小伙伴也可以先传送官网查看英文原味版博客。

本期共享的是 Nuxt 3.11，整体非常接近 Nuxt 3.9，但此版本涵盖了更多功能和修复。

免责声明

本文属于是踢足球的程序员的个人理解翻译，略有删改，仅供参考。英文原味版请传送 Nuxt 3.10。

预渲染时实验性共享 `asyncData`

当预渲染路由时，我们最终可能会反复重新请求相同的数据。在 Nuxt 2 中，我们可以创建一个“有效负载”（payload），这有且仅有一次请求，然后就可以在每个页面中访问。当然啦，这也可以在 Nuxt 3 中手动完成。

Nuxt 3.10 之后，现在我们可以在预渲染网站时自动为您执行上述操作。我们的 useAsyncData 和 useFetch 调用会在网站渲染期间进行数据去重和缓存。

// nuxt.config.ts
export defineNuxtConfig({experimental: {sharedPrerenderData: true}
})

确保数据对应的任意唯一键始终可以解析为相同的数据至关重要。举个栗子，如果您使用 useAsyncData 来请求与特定页面相关的数据，那就应该提供与该数据唯一匹配的键。useFetch 应该会自动执行此操作。

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

我们现在发布了一个 useId 组合式函数，用于生成 SSR（服务端渲染）安全的唯一 ID。这允许在您的应用程序中创建更易于访问的界面。举个栗子：

<script setup>// MyForm.vueconst 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 文件。新的 pages:routerOptions 钩子允许模块作者执行添加自定义 scrollBehavior，或添加运行时路由增强等操作。

客户端的 Node 支持

我们现在（实验性）支持关键 Node 内置程序的 polyfill（功能补丁），就像我们在部署到非 Node 环境时，通过服务器上的 Nitro 所做的那样。

这意味着，在客户端代码中，我们可以直接从 Node 内置函数导入，比如支持 node: 和 Node import。但是，不会为您全局注入任何内容，避免不必要地增加包体积。您可以按需导入它们。

// some-file.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'

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

// plugins/node.client.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'globalThis.Buffer = Buffer
globalThis.process = processexport default defineNuxtPlugin({})

对于在没有妥当浏览器支持的情况下使用库的用户而言，这应该会让它们的生活更轻松。但是，由于不必要地增加打包的风险，我们强烈建议用户尽可能选择其他备胎方案。

更好的 cookie 响应性

我们现在允许您选择使用 CookieStore。如果存在浏览器支持，那会直接使用它而不是信道广播在更新 cookie 时响应式更新 useCookie 的值。

这还与一个新的组合式函数 refreshCookie 配对，这允许手动刷新 cookie 的值，比如在执行请求后。

检测反模式

在 Nuxt 3.10 中，我们还提供了一系列功能，来检测潜在的错误和性能问题。

如果在服务器上使用 setInterval，我们现在会直接报错。
如果数据请求的组合式函数使用不当，比如在插件或 setup 上下文之外，我们会发出警告（当且仅当开发时）。
如果您不使用 <NuxtPage />，但启用了 vue-router 集成，我们会发出警告（当且仅当开发时）。<RouterView /> 不应该单独使用。

细粒度视图过渡支持

现在可以使用 definePageMeta 控制每个页面的视图过渡（view transition）支持。

我们首先需要启用实验性视图转换支持：

// nuxt.config.ts
export default defineNuxtConfig({experimental: {viewTransition: true},app: {// 视图过渡默认会启动，您可以按需全局禁用它们viewTransition: false}
})

您可以细粒度地选用/启用：

<script setup lang="ts">// pages/index.vuedefinePageMeta({viewTransition: false})
</script>

最后，如果用户的浏览器匹配 prefers-reduced-motion: reduce，Nuxt 则不会应用视图过渡。您可以设置 viewTransition: 'always'，这取决于您对用户偏好的尊重。

构建时路由元数据

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

// nuxt.config.ts
export default defineNuxtConfig({experimental: {scanPageMeta: true}
})

请沉浸式体验一下，并让我们知道它对您有何作用。我们期望提高性能，并在未来版本中默认启动此功能，这样 @nuxtjs/i18n 等模块可以提供与 definePageMeta 中设置的路由选项更深入的集成。

bundler 模块解析

我们现在选择使用 TS bundler 解析，这应该更类似于我们解决 Nuxt 项目中模块的子路径导入的实际方式。

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

作为其中的一部分，我们在整个生态系统中开放了 85 个 PR（拉取请求）来测试默认设置的切换，并发现并修复了某些问题。

如果您需要关闭此行为，您可以这样做。但是，请考虑在库或模块的存储库中提出 issue（请随时在其中标记我），以便可以从根源搞定此问题。

// nuxt.config.ts
export default defineNuxtConfig({future: {typescriptBundlerResolution: false}
})