釋出· 2025年7月28日

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>
    <!-- 
      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' })