---
title: "Nuxt 3.4"
description: "Nuxt 3.4.0 是 Nuxt 3 的最新版本，带来了一些令人兴奋的新功能，包括支持 View Transitions API，从服务器传输丰富的 JavaScript 负载到客户端等等。"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-4"
---
# Nuxt 3.4

> Nuxt 3.4.0 是 Nuxt 3 的最新版本，带来了一些令人兴奋的新功能，包括支持 View Transitions API，从服务器传输丰富的 JavaScript 负载到客户端等等。

## 🪄 View Transitions API 支持

::article-video{cloudinary="v1681229056/nuxt3/nuxt-view-transitions_cruvma"}
::

你可以在 <https://nuxt-view-transitions.surge.sh> 上查看演示，以及在[StackBlitz 上的源码](https://stackblitz.com/edit/nuxt-view-transitions)。

你可能已经注意到，基于 Chromium 的浏览器现在支持一种新的 web 平台 API：[**View Transitions API**](https://developer.chrome.com/docs/web-platform/view-transitions/)。这是一个令人兴奋的新功能，用于原生浏览器过渡效果，可以在不同页面的不相关元素之间进行过渡。

Nuxt 现在附带了一个实验性的实现，这将在 v3.4 版本周期中进行积极开发。请参阅[链接 PR](https://github.com/nuxt/nuxt/pull/20092)中的已知问题。

```ts
export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})
```

## ✨ 负载增强

我们合并了一个\*\*[对 Nuxt 如何处理负载的重大更改](https://github.com/nuxt/nuxt/pull/19205)\*\*（在实验性标志下）。负载用于在服务器端渲染时从服务器向客户端发送数据，并在混合阶段避免重复数据获取。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  experimental: {
    renderJsonPayloads: true
  }
})
```

启用这个新选项后，现在意味着**各种丰富的 JavaScript 类型被支持**：正则表达式、日期、Map 和 Set，BigInt，以及 NuxtError - 以及 Vue 特定的对象，如 `ref`、`reactive`、`shallowRef` 和 `shallowReactive`。

在我们的测试套件中可以找到[一个示例](https://github.com/nuxt/nuxt/blob/main/test/fixtures/basic/pages/json-payload.vue)。

这得益于 [Rich-Harris/devalue#58](https://github.com/Rich-Harris/devalue/pull/58)。很长一段时间以来，Nuxt 一直在使用我们自己的 devalue 分支，由于无法序列化 Errors 和其他非 POJO 对象而导致问题，但现在我们已经转回到原版。

你甚至可以使用新的对象语法 Nuxt 插件注册自定义类型：

```ts [plugins/custom-payload-type.ts]
export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
```

你可以在[这里](https://github.com/rich-harris/devalue#custom-types)了解更多关于它如何工作的信息。

**注意**：这只影响 Nuxt 应用的负载数据，即存储在 `useState` 中的数据，从 `useAsyncData` 返回的数据，或通过 `nuxtApp.payload` 手动注入的数据。它不影响通过 `$fetch` 或 `useFetch` 从 Nitro 服务器路由获取的数据，尽管这是我想进一步探索的一个领域。

初步测试显示明显的加速效果：对于一个有大型 JSON 负载的非常简单的应用，总体服务器响应时间提高了**25%**，但我鼓励你进行自己的测试，并与我们分享结果。

正如前面提到的，我们正在将这个功能置于标志后面，以便我们可以广泛测试并收集对新方案的反馈。最显著的潜在变化是，负载现在不再立即在 `window.__NUXT__` 上可用。相反，我们现在需要初始化 Nuxt 应用程序以解析负载，因此任何访问 `__NUXT__` 的代码都需要在插件中或稍后在 Nuxt 应用程序生命周期中运行。如果你预见到或在项目中遇到问题，请随时提出问题。

## 🎁 对象语法的 Nuxt 插件

我们现在支持对象语法的 Nuxt 插件，以更好地控制插件的执行顺序和更轻松地注册钩子。

```ts [plugins/my-plugin.ts]
export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // 或 'post'
  async setup (nuxtApp) {
    // 这相当于一个正常的函数插件
  },
  hooks: {
    // 你可以直接在这里注册 Nuxt 应用程序的钩子
    'app:created'() {
      const nuxtApp = useNuxtApp()
      //
    }
  }
})
```

未来，我们计划根据你在 Nuxt 插件中传递的元数据来启用构建优化。

## 🛠️ 更轻松的 Devtools 配置

在您的项目中启用 Nuxt DevTools 更加简单：只需在您的 `nuxt.config.ts` 文件中设置 `devtools: true` 来启用开发工具。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  devtools: true
})
```

如果它还没有安装，Nuxt 将提示在本地安装它。这意味着你不再需要全局启用 Nuxt DevTools。

**注意**：DevTools 仍处于实验性阶段，并且正在积极开发中，所以请准备好偶尔遇到意外行为，并请直接向 <https://github.com/nuxt/devtools> 报告问题 🙏

## 📚 层级改进

我们现在支持在层级内部转换 `~`/`~~`/`@`/`@@` 别名（[https://github.com/nuxt/nuxt/pull/19986），这意味着你现在不再需要在层级中导入时使用相对路径。](https://github.com/nuxt/nuxt/pull/19986%EF%BC%89%EF%BC%8C%E8%BF%99%E6%84%8F%E5%91%B3%E7%9D%80%E4%BD%A0%E7%8E%B0%E5%9C%A8%E4%B8%8D%E5%86%8D%E9%9C%80%E8%A6%81%E5%9C%A8%E5%B1%82%E7%BA%A7%E4%B8%AD%E5%AF%BC%E5%85%A5%E6%97%B6%E4%BD%BF%E7%94%A8%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E3%80%82)

这应该意味着更容易将一个“普通”的 Nuxt 项目用作[层级](https://nuxt.com/docs/getting-started/layers#layers)，而无需特别编写为层级。

## 🧸 更好的上下文转换

我们[现在转换了](https://github.com/nuxt/nuxt/pull/20182) `definePageMeta` 和 `defineNuxtComponent` 的某些键，这意味着你应该不会再遇到缺少 Nuxt 实例的问题。这包括在`asyncData`和 `setup` 函数中的 `await` 后访问 Nuxt 实例的支持，适用于仍在使用 Options API 的情况。当使用异步函数时，你也不再需要使用 `defineNuxtRouteMiddleware` 包装 `middleware` 和 `validate`。

## ♻️ 生态系统更新

和往常一样，此版本将引入上游改进，包括新的 [Consola v3](https://github.com/unjs/consola) 和 [Nitropack v2.3.3](https://github.com/unjs/nitro)（预计很快会有新的次要版本）。

## 🚨 '破坏性的修复'

我们还借此机会对这个次要版本进行了一些清理。

1. 以前可以传递 `x-nuxt-no-ssr` 请求头（未记录）来强制进行 SPA 渲染。我们现在默认禁用了这一行为，但你可以通过将 `experimental.respectNoSSRHeader` 设置为 true 将其恢复。或者，你也可以在服务端设置 `event.context.nuxt.noSSR` 来强制进行 SPA 渲染。
2. 我们已[移除（已弃用的）`#head` 别名](https://github.com/nuxt/nuxt/pull/20111)，并且默认禁用了 [@vueuse/head 行为的 polyfill](https://github.com/nuxt/nuxt/pull/20131)。它仍然可以通过设置 `experimental.polyfillVueUseHead` 来启用。
3. 我们已[移除（已弃用的）`experimental.viteNode` 选项](https://github.com/nuxt/nuxt/pull/20112)。现在可以改为通过 `vite.devBundler` 进行配置。
4. 我们已[弃用在没有 `public` 键的情况下访问公共运行时配置](https://github.com/nuxt/nuxt/pull/20082)。这是一个与 Nuxt 2 的未记录兼容性措施，我们计划在 v3.5 中将其完全移除。
5. 为修复 vue-router 集成中的一个 bug，我们现在生成了略有不同的路径匹配语法。如果你依赖的是精确生成的路径，请查看 <https://github.com/nuxt/nuxt/pull/19902> 了解更多信息。

## ✅ 升级

和往常一样，我们推荐的升级方式是运行：

```sh
npx nuxi upgrade --force
```

这将刷新你的锁定文件，并确保你获取了 Nuxt 依赖的其他依赖项的更新，尤其是在 unjs 生态系统中。


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.