Nuxt 3.10 正式发布，来看看有功能变化！

Nuxt 团队最近对模块的解析方式进行了优化。通过启用 TypeScript 的构建工具解析，更准确地模拟了在 Nuxt 项目中解决子路径导入模块的实际过程。

1 月 30 日，Nuxt.js 3.10 正式发布。该版本的更新亮点如下：

• 预渲染时共享 asyncData（实验性）

• SSR 安全且可访问的唯一 ID 生成

• 扩展 app/router.options

• 客户端 Node.js 支持

• 更好的 cookie 响应性

• 细粒度视图转换支持

• 构建时路由元数据

• 构建工具模块解析

预渲染时共享 asyncData

当我们预渲染路由（即预先生成 HTML 内容）时，由于每个页面都是独立渲染的，如果我们没有采取适当的措施，可能会导致在每个页面中都重新获取相同的数据。这会导致不必要的 API 调用和可能的性能问题。

在 Nuxt 2 中，可以创建一个数据集，这个数据集可以在多个页面中被访问和重用。这样，只需要获取一次数据，就可以在多个页面中使用它。但这是需要手动设置的。

在 Nuxt 3 中，开发者可以继续使用 useAsyncData 和 useFetch 这样的钩子来获取数据。但通过 v3.10 的改进，Nuxt 3 现在能够自动处理数据的去重和缓存。这意味着，当预渲染多个页面时，如果这些页面需要相同的数据，Nuxt 3 会自动确保这些数据只被获取一次，并在多个页面之间共享。这样，开发者就不需要手动设置数据的共享和缓存了。

复制

export defineNuxtConfig({   experimental: {     sharedPrerenderData: true  } })

SSR 安全且可访问的唯一 ID 生成

在 v3.10 版本中，提供了一个 useId 组合式函数，用于生成 SSR 安全的唯一 ID。这有助于创建更易于访问的应用界面。

复制

<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。借助全新的 pages:routerOptions 钩子，他们能实现诸多功能，如自定义 **scrollBehavior**，或动态调整路由设置。

客户端 Node.js 支持

现在，Nuxt 已实验性地支持在客户端代码中为关键的 Node.js 内置功能提供 polyfill。这意味着，当你在编写客户端代码时，可以直接从 Node.js 的内置模块导入功能，就像在服务器端使用 Nitro 一样。但是，与服务器端不同，我们不会为你全局地注入任何内容，以避免不必要地增加你的代码包的大小。你需要根据你的需求在需要的地方进行导入。

复制

import { Buffer } from 'node:buffer'import process from 'node:process'

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

复制

import { Buffer } from 'node:buffer'import process from 'node:process'
globalThis.Buffer = BufferglobalThis.process = process
export default defineNuxtPlugin({})

这应该会让那些正在使用没有适当浏览器支持的库的用户的工作变得更轻松。但是，由于增加包大小的风险，强烈建议用户如果可能的话，选择其他替代方案。

更好的 cookie 响应性

现在允许选择使用 CookieStore。如果浏览器支持，那么在更新 cookies 时，将使用 CookieStore 替代 BroadcastChannel 来响应地更新 useCookie 值。此外，还提供了一个新的函数 refreshCookie，允许手动刷新 cookie 值，例如在执行请求之后。

细粒度视图转换支持

现在，可以使用 definePageMeta 函数在每个页面上精细控制视图转换的支持。

在使用之前，请确保启用了实验性的视图转换支持功能。

复制

export default defineNuxtConfig({  experimental: {    viewTransition: true  },  app: {    viewTransition: false  }})

并且可以选择性地启用/禁用粒度化的支持：

复制

<script setup lang="ts">definePageMeta({  viewTransition: false})</

如果用户的浏览器偏好减少动画，Nuxt 将不会应用视图转换。可以将 viewTransition 设置为 'always'，但最终还是要尊重用户的偏好。

构建时路由元数据

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

复制

export default defineNuxtConfig({  experimental: {    scanPageMeta: true  }})

未来的版本中，默认情况下将启用此功能，以提高性能，并支持诸如 @nuxtjs/i18n 等模块与在 definePageMeta 中设置的路由选项更深入地集成。

构建工具模块解析

Nuxt 团队最近对模块的解析方式进行了优化。通过启用 TypeScript 的构建工具解析，更准确地模拟了在 Nuxt 项目中解决子路径导入模块的实际过程。

这种“构建工具”模块解析方式受到 Vue 和 Vite 的推荐，但遗憾的是，许多包的 package.json 文件中并没有正确配置相关项。作为改进措施的一部分，我们在整个生态系统中提出了 85 个 PR，用于测试切换默认解析方式，并修复了一些问题。

可以通过以下方式来关闭此行为：

复制

export default defineNuxtConfig({  future: {    typescriptBundlerResolution: false  }})

升级

可以通过以下方式来升级最新版本：

复制

nuxi upgrade --force

这也将刷新 lockfile，并确保获取 Nuxt 所依赖的其他依赖项的更新，尤其是在 unjs 生态系统中的更新。

技术前沿拓展

前端开发，你的认知不能仅局限于技术内，需要发散思维了解技术圈的前沿知识。细心的人会发现，开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。

介绍一款程序员都应该知道的软件JNPF快速开发平台，很多人都尝试用过它，它是功能的集大成者，任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；集成了代码生成器，支持前后端业务代码生成，实现快速开发，提升工作效率；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3。如果你有闲暇时间，可以做个知识拓展。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

​