大家好，这里是大家的林语冰。
所谓“元宇宙”，即关于宇宙的宇宙；元认知，即关于认知的认知；元框架，即关于框架的框架。
在主流的 JS 库/框架生态中，近年来诞生了若干元框架，比如 React 的 Next 和 Remix，Vue 的 Nuxt 等。
不久前，Nuxt 团队官宣 Nuxt 3.10 正式发布，包含了若干功能和修复。其实 Nuxt 最新的语义化次版本已经到达 3.11 了，对 Vue 生态感兴趣的小伙伴可以持续关注 UP 主，我们会在近未来继续翻译 Nuxt 的官方博客，比较猴急的小伙伴也可以先传送官网查看英文原味版博客。
本期共享的是 Nuxt 3.10，整体非常接近 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.vue
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 文件。新的 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 = process
export 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.vue
definePageMeta({
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
}
})
Upgrading ✅ 升级
像往常一样，我们的升级建议是运行：
nuxi upgrade --force
这也会刷新您的 lockfile（锁定文件），并确保您从 Nuxt 依赖的其他依赖中拉取更新，尤其是在 unjs 生态系统中。
本期话题是 —— 你最常用或喜欢哪个前端元框架？
欢迎在本文下方自由言论，文明共享。谢谢大家的点赞，掰掰~
《前端猫猫教》每日 9 点半更新，坚持阅读，自律打卡，每天一次，进步一点。
原文链接：https://juejin.cn/post/7350861738973626402 作者：前端猫猫教
