大家好,这里是大家的林语冰。
所谓"元宇宙",即关于宇宙的宇宙;元认知,即关于认知的认知;元框架,即关于框架的框架。
在主流的 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
调用会在网站渲染期间进行数据去重和缓存。
ts
// nuxt.config.ts
export defineNuxtConfig({
experimental: {
sharedPrerenderData: true
}
})
确保数据对应的任意唯一键始终可以解析为相同的数据至关重要。举个栗子,如果您使用 useAsyncData
来请求与特定页面相关的数据,那就应该提供与该数据唯一匹配的键。useFetch
应该会自动执行此操作。
SSR 安全且可访问的唯一 ID 创建
我们现在发布了一个 useId
组合式函数,用于生成 SSR(服务端渲染)安全的唯一 ID。这允许在您的应用程序中创建更易于访问的界面。举个栗子:
html
<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
。但是,不会为您全局注入任何内容,避免不必要地增加包体积。您可以按需导入它们。
ts
// some-file.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'
或者提供您自己的 polyfill,比如在 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。如果存在浏览器支持,那会直接使用它而不是信道广播在更新 cookie
时响应式更新 useCookie
的值。
这还与一个新的组合式函数 refreshCookie
配对,这允许手动刷新 cookie 的值,比如在执行请求后。
检测反模式
在 Nuxt 3.10 中,我们还提供了一系列功能,来检测潜在的错误和性能问题。
- 如果在服务器上使用
setInterval
,我们现在会直接报错。 - 如果数据请求的组合式函数使用不当,比如在插件或
setup
上下文之外,我们会发出警告(当且仅当开发时)。 - 如果您不使用
<NuxtPage />
,但启用了vue-router
集成,我们会发出警告(当且仅当开发时)。<RouterView />
不应该单独使用。
细粒度视图过渡支持
现在可以使用 definePageMeta
控制每个页面的视图过渡(view transition)支持。
我们首先需要启用实验性视图转换支持:
ts
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
viewTransition: true
},
app: {
// 视图过渡默认会启动,您可以按需全局禁用它们
viewTransition: false
}
})
您可以细粒度地选用/启用:
html
<script setup lang="ts">
// pages/index.vue
definePageMeta({
viewTransition: false
})
</script>
最后,如果用户的浏览器匹配 prefers-reduced-motion: reduce
,Nuxt 则不会应用视图过渡。您可以设置 viewTransition: 'always'
,这取决于您对用户偏好的尊重。
构建时路由元数据
现在可以在构建时访问 definePageMeta
中定义的路由元数据,这允许模块和钩子修改和更改这些值。
ts
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
scanPageMeta: true
}
})
请沉浸式体验一下,并让我们知道它对您有何作用。我们期望提高性能,并在未来版本中默认启动此功能,这样 @nuxtjs/i18n
等模块可以提供与 definePageMeta
中设置的路由选项更深入的集成。
bundler 模块解析
我们现在选择使用 TS bundler
解析,这应该更类似于我们解决 Nuxt 项目中模块的子路径导入的实际方式。
Vue 和 Vite 推荐使用"Bundler"模块解析,但不幸的是,仍然有许多包的 package.json
中没有正确的入口。
作为其中的一部分,我们在整个生态系统中开放了 85 个 PR(拉取请求)来测试默认设置的切换,并发现并修复了某些问题。
如果您需要关闭此行为,您可以这样做。但是,请考虑在库或模块的存储库中提出 issue(请随时在其中标记我),以便可以从根源搞定此问题。
ts
// nuxt.config.ts
export default defineNuxtConfig({
future: {
typescriptBundlerResolution: false
}
})
Upgrading ✅ 升级
像往常一样,我们的升级建议是运行:
bash
nuxi upgrade --force
这也会刷新您的 lockfile(锁定文件),并确保您从 Nuxt 依赖的其他依赖中拉取更新,尤其是在 unjs 生态系统中。
本期话题是 ------ 你最常用或喜欢哪个前端元框架?
欢迎在本文下方自由言论,文明共享。谢谢大家的点赞,掰掰~
《前端猫猫教》每日 9 点半更新,坚持阅读,自律打卡,每天一次,进步一点。