---
title: "Nuxt 3.18"
description: "Nuxt 3.18 已发布——将 v4 特性带回 v3，带来改进的无障碍支持、更好的浏览器开发工具集成以及性能提升！"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-18"
---
# Nuxt 3.18

> Nuxt 3.18 已发布——将 v4 特性带回 v3，带来改进的无障碍支持、更好的浏览器开发工具集成以及性能提升！

## 🧪 延迟水合宏

基于 v3.16 的延迟水合支持，我们现在支持**延迟水合宏**（[#31192](https://github.com/nuxt/nuxt/pull/31192)）！它们提供了一种更便捷的方式来控制组件的水合：

```vue
<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'visible',
  () => import('./components/MyComponent.vue')
)
</script>
<template>
  <div>
    <!-- 
      当元素距离进入视口 100px 时，
      将触发水合。
    -->
    <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" />
  </div>
</template>
```

这些宏使得可以在使用显式组件导入的同时，利用 Nuxt 的延迟水合工具。

## ♿️ 无障碍改进

我们通过在内置的 `app.vue` 中加入 `<NuxtRouteAnnouncer>` 进行了无障碍增强（[#32621](https://github.com/nuxt/nuxt/pull/32621)）。这意味着页面变更会被屏幕阅读器宣布，使视觉障碍用户的导航体验更友好。（此功能仅针对项目中没有自定义 `app.vue` 的情况；如果你已有自定义，请确保在其中保留 `<NuxtRouteAnnouncer>`！）

## 🛠️ 开发体验提升

### Chrome DevTools 工作区集成

新增了**Chrome DevTools 工作区集成**（[#32084](https://github.com/nuxt/nuxt/pull/32084)），允许你直接在 Chrome DevTools 中编辑 Nuxt 源文件。这带来了更好的调试体验，DevTools 中的修改会直接反映到实际源文件。

### 更好的组件类型安全

组件类型安全得到了如下改进：

- **为 `<ClientOnly>` 和 `<DevOnly>` 增加类型化插槽**（[#32707](https://github.com/nuxt/nuxt/pull/32707)）——更好的 IntelliSense 和错误检查
- **导出了 `<NuxtTime>` 的 props 类型**（[#32547](https://github.com/nuxt/nuxt/pull/32547)）——更易扩展和自定义

### 新的自动导入：`onWatcherCleanup`

来自 `vue` 的 `onWatcherCleanup` 函数现在可自动导入（[#32396](https://github.com/nuxt/nuxt/pull/32396)），方便清理 watcher 防止内存泄漏：

```ts
const { data } = useAsyncData('users', fetchUsers)

watch(data, (newData) => {
  const interval = setInterval(() => {
    // 某些周期任务
  }, 1000)
  
  // 停止 watcher 时清理
  onWatcherCleanup(() => {
    clearInterval(interval)
  })
})
```

## 📊 可观测性增强

页面路由现已**暴露给 Nitro 以支持可观测性**（[#32617](https://github.com/nuxt/nuxt/pull/32617)），实现更好的监控和与支持平台的分析集成。这让可观测工具能更有效地追踪页面级指标。

## 🔧 模块开发改进

模块作者将体验到多项便利改进：

### 简化的服务器导入

`addServerImports` 实用工具现支持**单个导入**（[#32289](https://github.com/nuxt/nuxt/pull/32289)），添加单个服务器工具更方便：

```ts
// 以前：必须传入数组
addServerImports([{ from: 'my-package', name: 'myUtility' }])

// 现在：可以直接传入对象
addServerImports({ from: 'my-package', name: 'myUtility' })
```

### TypeScript 配置

模块现在可**向 `typescript.hoist` 添加配置**（[#32601](https://github.com/nuxt/nuxt/pull/32601)），获得更多对 TypeScript 配置及类型生成的控制权。

## ⚡️ 性能提升

我们做了多项性能优化：

- 通过内部 socket 改进了 Vite-node 通信（[#32417](https://github.com/nuxt/nuxt/pull/32417)），加快开发构建速度
- 迁移至 `oxc-walker`（[#32250](https://github.com/nuxt/nuxt/pull/32250)）及使用 oxc 进行 `onPrehydrate` 转换（[#32045](https://github.com/nuxt/nuxt/pull/32045)），提升代码转换速度

## 🐛 Bug 修复

本次发布还包含若干重要修复：

- **改进数据获取**：计算键变化时，旧数据现在正确保留（[#32616](https://github.com/nuxt/nuxt/pull/32616)）
- **优化滚动行为**：`scrollBehaviorType` 现在仅用于哈希滚动（[#32622](https://github.com/nuxt/nuxt/pull/32622)）
- **修正目录别名**：为部分目录别名加上尾部斜杠，增强一致性（[#32755](https://github.com/nuxt/nuxt/pull/32755)）

## ✅ 升级指南

一如既往，建议运行：

```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.18.0"}
阅读 Nuxt `v3.18.0` 的完整发布说明。
::

衷心感谢所有参与本次发布的贡献者。在接下来的六个月内，我们将持续回移兼容的 v4 功能和修复，欢迎大家继续反馈！❤️


## Sitemap

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