Release· July 28, 2025

Nuxt 3.18

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

Daniel Roe

@danielroe.dev

🧪 延迟水合宏

基于 v3.16 的延迟水合支持，我们现在支持延迟水合宏（#31192）！它们提供了一种更便捷的方式来控制组件的水合：

<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）。这意味着页面变更会被屏幕阅读器宣布，使视觉障碍用户的导航体验更友好。（此功能仅针对项目中没有自定义 app.vue 的情况；如果你已有自定义，请确保在其中保留 <NuxtRouteAnnouncer>！）

🛠️ 开发体验提升

Chrome DevTools 工作区集成

新增了Chrome DevTools 工作区集成（#32084），允许你直接在 Chrome DevTools 中编辑 Nuxt 源文件。这带来了更好的调试体验，DevTools 中的修改会直接反映到实际源文件。

更好的组件类型安全

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

为 <ClientOnly> 和 <DevOnly> 增加类型化插槽（#32707）——更好的 IntelliSense 和错误检查
导出了 <NuxtTime> 的 props 类型（#32547）——更易扩展和自定义

新的自动导入：`onWatcherCleanup`

来自 vue 的 onWatcherCleanup 函数现在可自动导入（#32396），方便清理 watcher 防止内存泄漏：

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

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

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

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