---
title: "Nuxt 3.16"
description: "Nuxt 3.16 已发布 - 充满了功能和性能改进"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-16"
---
# Nuxt 3.16

> Nuxt 3.16 已发布 - 充满了功能和性能改进

这次更新内容丰富！

## ⚡️ 一个全新的 Nuxt

欢迎使用 `create-nuxt`，一个启动 Nuxt 项目的新工具（感谢 [@devgar](https://github.com/devgar) 捐赠的包名）！

它是 `nuxi init` 的精简版 - 体积只有六分之一，所有依赖项都内联打包为一个单独文件，帮助您尽快开始。

创建新项目如此简单：

```bash
npm create nuxt
```

![创建 nuxt 应用的截图](https://nuxt.zhcndoc.com/assets/blog/create-nuxt-ascii.jpeg){.border.border-gray-200.dark:border-gray-700.rounded-lg}

特别感谢 [@cmang](https://github.com/cmang) 提供的 [美丽 ASCII 艺术](https://bsky.app/profile/durdraw.org/post/3liadod3gv22a)。❤️

想了解更多关于 Nuxt CLI 的发展方向吗？请查看我们的路线图 [这里](https://github.com/nuxt/cli/issues/648)，包括我们关于 [交互式模块选择器](https://github.com/nuxt/cli/issues/754) 的计划。

## 🚀 Unhead v2

我们升级到了 `unhead` v2，这是 Nuxt `<head>` 管理的引擎。这个主要版本移除了不推荐的功能，并改进了上下文的工作方式：

- 对于 Nuxt 3 用户，我们提供了一个遗留兼容构建，确保没有功能中断
- 上下文实现现在通过 Nuxt 本身更直接

```ts
// Nuxt 现在重新导出函数，同时正确解析上下文
export function useHead(input, options = {}) {
  const unhead = injectHead(options.nuxt)
  return head(input, { head: unhead, ...options })
}
```

如果您在应用程序中直接使用 Unhead，请记住：

1. 从 Nuxt 的自动导入或 `#app/composables/head` 导入，而不是 `@unhead/vue`
2. 直接从 `@unhead/vue` 导入可能会失去异步上下文

但请放心 - 我们在 Nuxt 3 中保持了向后兼容性，因此大多数用户不需要进行任何更改！

如果您选择了 `compatibilityVersion: 4`，请查看 [我们的升级指南](https://nuxt.zhcndoc.com/docs/getting-started/upgrade#unhead-v2) 以获取其他更改的内容。

## 🔧 Devtools v2 升级

Nuxt Devtools 已升级到 v2 ([#30889](https://github.com/nuxt/nuxt/pull/30889))！

您会喜欢新的功能，如自定义编辑器选择、用于检查已解析配置的 Discovery.js（非常适合调试）、架构生成器的回归以及更精简的依赖项。

我们最喜欢的改进之一是能够跟踪模块如何修改您的 Nuxt 配置 - 让您一目了然内部发生了什么。

👉 在 [Nuxt DevTools 发布说明](https://github.com/nuxt/devtools/releases) 中发现所有详情。

## ⚡️ 性能提升

我们继续使 Nuxt 更快，v3.16 版本包含了一系列改进：

1. 使用 [`exsolve`](https://github.com/unjs/exsolve) 进行模块解析（[#31124](https://github.com/nuxt/nuxt/pull/31124)）以及其他 unjs 生态系统（nitro，c12，pkg-types 等） - 这极大加快了模块解析速度
2. 更智能的模块解析路径（[#31037](https://github.com/nuxt/nuxt/pull/31037)） - 优先使用直接导入以提高效率
3. 消除了重复的 Nitro 别名解析（[#31088](https://github.com/nuxt/nuxt/pull/31088)） - 更精简的文件处理
4. 通过跳过不必要的解析步骤优化 `loadNuxt`（[#31176](https://github.com/nuxt/nuxt/pull/31176)） - 启动更快
5. 在 Nuxt 插件中采用 `oxc-parser` 进行解析（[#30066](https://github.com/nuxt/nuxt/pull/30066)）

所有这些速度提升都是自动发生的 - 无需任何配置！

感谢 [CodSpeed](https://codspeed.io/) 和 [Vitest 基准测试](https://vitest.dev/guide/features.html#benchmarking) 来测量这些改进在 CI 中的表现 - 这真的很有帮助。

补充一点，我个人的网站 [roe.dev](https://github.com/danielroe/roe.dev) 在 v3.16 中加载速度提升了 32%，而 [nuxt.com](https://github.com/nuxt/nuxt.com) 加快了 28%。我希望您能看到类似的效果！⚡️

## 🕰️ 延迟水合支持

我们很高兴为您带来原生的延迟/懒加载水合支持 ([#26468](https://github.com/nuxt/nuxt/pull/26468))！这让您可以精确控制组件的水合时机，有助于改善初始加载性能和交互时间。我们正在利用 Vue 的内置水合策略 - [在 Vue 文档中查看它们](https://vuejs.org/guide/components/async.html#lazy-hydration)。

```vue
<template>
  <!-- 当组件在视口中可见时进行水合 -->
  <LazyExpensiveComponent hydrate-on-visible />
  
  <!-- 当浏览器空闲时进行水合 -->
  <LazyHeavyComponent hydrate-on-idle />
  
  <!-- 在交互发生时进行水合（此例为鼠标悬停） -->
  <LazyDropdown hydrate-on-interaction="mouseover" />
  
  <!-- 当媒体查询匹配时进行水合 -->
  <LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
  
  <!-- 延时水合，毫秒为单位 -->
  <LazyFooter :hydrate-after="2000" />
</template>
```

您还可以通过 `@hydrated` 事件监听水合发生的时机：

```vue
<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />
```

了解更多关于懒水合的信息，请查看 [我们的组件文档](https://nuxt.zhcndoc.com/docs/guide/directory-structure/components#delayed-or-lazy-hydration)。

## 🧩 高级页面配置

您现在可以微调 Nuxt 扫描哪些文件作为页面（[#31090](https://github.com/nuxt/nuxt/pull/31090)），更好地控制您的项目结构：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  pages: {
    // 过滤特定文件或目录
    pattern: ['**/*.vue'],
  }
})
```

## 🔍 增强调试

我们使得使用 `debug` 选项进行调试变得更为灵活！现在您可以仅启用所需的调试日志 ([#30578](https://github.com/nuxt/nuxt/pull/30578))：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  debug: {
    // 启用特定调试功能
    templates: true,
    modules: true,
    watchers: true,
    hooks: {
      client: true,
      server: true,
    },
    nitro: true,
    router: true,
    hydration: true,
  }
})
```

或者简单地使用 `debug: true` 来启用所有这些调试功能。

## 🎨 装饰器支持

对于热爱装饰器的朋友（不管你是谁！），我们添加了实验性支持 ([#27672](https://github.com/nuxt/nuxt/pull/27672))。如同所有实验性功能，反馈非常重要。

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

```ts
function something (_method: () => unknown) {
  return () => 'decorated'
}

class SomeClass {
  @something
  public someMethod () {
    return 'initial'
  }
}

const value = new SomeClass().someMethod()
// 返回 'decorated'
```

## 📛 命名层别名

这是一个备受期待的功能，它来了！自动扫描的本地层（来自您的 `~~/layers` 目录）现在会自动创建别名。您可以通过 `#layers/test` 访问您的 `~~/layers/test` 层 ([#30948](https://github.com/nuxt/nuxt/pull/30948)) - 无需配置。

如果您想为其他层添加命名别名，可以在层配置中添加名称：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  $meta: {
    name: 'example-layer',
  },
})
```

这将创建指向您的层的别名 `#layers/example-layer` - 使导入更干净、更直观。

## 🧪 错误处理改进

我们大大改进了错误信息和源追踪功能 ([#31144](https://github.com/nuxt/nuxt/pull/31144))：

1. 更好的警告以便明确的 `useAsyncData` 调用与精确的文件位置
2. 当岛屿页面出现错误时，错误页面现在会正确显示 ([#31081](https://github.com/nuxt/nuxt/pull/31081))

另外，我们现在使用 Nitro 美丽的错误处理（由 [youch](https://github.com/poppinss/youch) 提供支持）来提供更加有用的错误信息，终端内带有堆栈跟踪支持。

Nitro 现在还会自动应用源映射，无需额外的 Node 选项，在渲染错误页面时，我们设置了适当的安全头部。

## 📦 模块开发改进

对于模块作者，我们添加了使用 `addTypeTemplate` 来增强 Nitro 类型的能力 ([#31079](https://github.com/nuxt/nuxt/pull/31079))：

```ts
// 在您的 Nuxt 模块内部
export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        declare module 'nitropack' {
          interface NitroRouteConfig {
            myCustomOption?: boolean
          }
        }
      `
    }, { nitro: true })
  }
})
```

## ⚙️ Nitro v2.11 升级

我们已升级到 Nitro v2.11。有许多改进 - 比我可以在这些简短的发布说明中概述的要多。

👉 查看 [Nitro v2.11.0 发布说明](https://github.com/nitrojs/nitro/releases/tag/v2.11.0) 中的所有细节。

## 📦 新的 `unjs` 主要版本

本次发布包括 unjs 生态系统中的几个主要版本升级，专注于通过仅 ESM 分发来提升性能和减少包体积：

- unenv 升级到 v2（全面重写）
- db0 升级到 v0.3（仅 ESM，原生 node:sql，改进）
- ohash 升级到 v2（仅 ESM，原生 node:crypto 支持，速度更快）
- untyped 升级到 v2（仅 ESM，更小的安装大小）
- unimport 升级到 v4（改进）
- c12 升级到 v3（仅 ESM）
- pathe 升级到 v2（仅 ESM）
- cookie-es 升级到 v2（仅 ESM）
- esbuild 升级到 v0.25
- chokidar 升级到 v4

## ✅ 升级

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

```sh
npx nuxi@latest upgrade --dedupe
```

这将刷新您的锁定文件并拉取 Nuxt 依赖的所有最新版本，尤其是来自 unjs 生态系统的。

## 完整发布说明

::read-more{icon="i-simple-icons-github" target="_blank" to="https://github.com/nuxt/nuxt/releases/tag/v3.16.0"}
阅读 Nuxt `v3.16.0` 的完整发布说明。
::

衷心感谢每一位参与此次发布的人员。❤️

我知道在这次发布中有很多非常重要的变化 - 如果您有任何反馈或问题，请随时告知我们！🙏


## Sitemap

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