Nuxt 3.18

🧪 懒水合宏

在 v3.16 延迟水合支持的基础上，我们现在支持懒水合宏（#31192）！它们提供了一种更符合人体工程学的方式来控制组件水合。

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'visible',
  () => import('./components/MyComponent.vue')
)
</script>
<template>
  <div>
    <!-- 
      Hydration will be triggered when
      the element(s) is 100px away from entering the viewport.
    -->
    <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" />
  </div>
</template>

这些宏使得 Nuxt 的懒水合工具可以与显式组件导入一起使用。

♿️ 可访问性改进

我们通过在内置的 app.vue 中包含 <NuxtRouteAnnouncer>（#32621）来增强可访问性。这意味着页面更改将通过屏幕阅读器进行播报，从而使视障用户更容易导航。（这仅适用于您的项目中没有 app.vue 的情况。如果您有，请将 <NuxtRouteAnnouncer> 保留在您的 app.vue 中！）

🛠️ 增强的开发体验

Chrome DevTools 工作区集成

我们添加了 Chrome DevTools 工作区集成（#32084），允许您直接从 Chrome DevTools 编辑 Nuxt 源文件。这创造了更好的调试体验，在 DevTools 中所做的更改会反映在您的实际源文件中。

更好的组件类型安全

组件类型安全得到了改进，通过

<ClientOnly> 和 <DevOnly> 的类型化插槽 (#32707）——更好的 IntelliSense 和错误检查
导出了 <NuxtTime> prop 类型 (#32547）——更容易扩展和定制

新的自动导入：`onWatcherCleanup`

来自 vue 的 onWatcherCleanup 函数现在可以自动导入（#32396），使得清理观察器和防止内存泄漏更容易

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

watch(data, (newData) => {
  const interval = setInterval(() => {
    // Some periodic task
  }, 1000)
  
  // Clean up when the watcher is stopped
  onWatcherCleanup(() => {
    clearInterval(interval)
  })
})

// Before: had to wrap in array
addServerImports([{ from: 'my-package', name: 'myUtility' }])

// Now: can pass directly
addServerImports({ from: 'my-package', name: 'myUtility' })