Vue 生态最火的元框架,Nuxt 3.10 正式发布!

大家好,这里是大家的林语冰。

所谓"元宇宙",即关于宇宙的宇宙;元认知,即关于认知的认知;元框架,即关于框架的框架。

在主流的 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 之后,现在我们可以在预渲染网站时自动为您执行上述操作。我们的 useAsyncDatauseFetch 调用会在网站渲染期间进行数据去重和缓存。

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({})

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

我们现在允许您选择使用 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 点半更新,坚持阅读,自律打卡,每天一次,进步一点

相关推荐
I_Am_Me_25 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ35 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z41 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴44 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript