📊 資料獲取改進
Nuxt 資料獲取層的重大重組為 useAsyncData 和 useFetch 帶來了顯著改進。
儘管我們旨在保持向後相容性，並將破壞性更改置於 experimental.granularCachedData 標誌（預設停用）之後，但我們建議在升級後徹底測試您的應用程式。如果您依賴於在使用 useAsyncData 的元件解除安裝後快取資料無限期可用，您還可以停用 experimental.purgeCachedData 以恢復之前的行為。
元件之間的資料一致性
所有使用相同鍵呼叫 useAsyncData 或 useFetch 的操作現在都共享底層的 refs，確保了應用程式的一致性
<!-- ComponentA.vue -->
<script setup>
const { data: users, pending } = useAsyncData('users', fetchUsers)
</script>
<!-- ComponentB.vue -->
<script setup>
// This will reference the same data state as ComponentA
const { data: users, status } = useAsyncData('users', fetchUsers)
// When either component refreshes the data, both will update consistently
</script>
這解決了元件可能存在資料狀態不一致的各種問題。
響應式鍵
您現在可以使用計算屬性、普通 refs 或 getter 函式作為鍵
const userId = ref('123')
const { data: user } = useAsyncData(
computed(() => `user-${userId.value}`),
() => fetchUser(userId.value)
)
// Changing the userId will automatically trigger a new data fetch
// and clean up the old data if no other components are using it
userId.value = '456'
最佳化資料重新獲取
當依賴項發生變化時，多個監視同一資料來源的元件現在只會觸發一次資料獲取
// In multiple components:
const { data } = useAsyncData(
'users',
() => $fetch(`/api/users?page=${route.query.page}`),
{ watch: [() => route.query.page] }
)
// When route.query.page changes, only one fetch operation will occur
// All components using this key will update simultaneously
🎭 內建 Nuxt 元件
<NuxtTime> - 一個用於安全時間顯示的新元件
我們添加了一個新的 <NuxtTime> 元件用於 SSR 安全的時間顯示，它解決了處理日期時的水合不匹配問題（#31876):
<template>
<NuxtTime :datetime="Date.now()" />
</template>
該元件接受多種時間格式，並優雅地處理客戶端和伺服器渲染。
增強的 <NuxtErrorBoundary>
<NuxtErrorBoundary> 元件已轉換為單檔案元件，現在從元件中暴露 error 和 clearError——以及在錯誤插槽型別中，讓您能夠更好地在模板中和透過 useTemplateRef 處理錯誤（#31847):
<NuxtErrorBoundary @error="handleError">
<template #error="{ error, clearError }">
<div>
<p>{{ error.message }}</p>
<button @click="clearError">Try again</button>
</div>
</template>
<!-- Content that might error -->
<MyComponent />
</NuxtErrorBoundary>
🔗 路由器改進
<NuxtLink> 現在接受一個 trailingSlash prop，讓您對 URL 格式有更多的控制（#31820):
<NuxtLink to="/about" trailing-slash>About</NuxtLink>
<!-- Will render <a href="/about/"> -->
🔄 載入指示器自定義
您現在可以透過元件上的新 props 直接自定義載入指示器（#31532):
hideDelay：控制在隱藏載入條之前等待多長時間resetDelay：控制在重置載入指示器狀態之前等待多長時間
<template>
<NuxtLoadingIndicator :hide-delay="500" :reset-delay="300" />
</template>
📚 文件作為包
Nuxt 文件現在作為 npm 包提供！您可以安裝 @nuxt/docs 來訪問用於構建文件網站的原始 markdown 和 YAML 內容（#31353).
💻 開發者體驗改進
我們添加了一些警告來幫助捕獲常見錯誤
- 當伺服器元件沒有根元素時的警告#31365
- 當使用保留的
runtimeConfig.app名稱空間時的警告#31774 - 當核心自動匯入預設被覆蓋時的警告#29971
- 當一個檔案中多次使用
definePageMeta時的錯誤#31634
🔌 增強的模組開發
模組作者會很高興知道
- 一個新的
experimental.enforceModuleCompatibility允許 Nuxt 在載入不相容的模組時丟擲錯誤（#31657）。它將在 Nuxt v4 中預設啟用。 - 您現在可以使用
addComponentExports自動註冊透過檔案中的命名匯出匯出的所有元件#27155
🔥 效能改進
進行了一些效能改進
- 切換到
tinyglobby以實現更快的 globbing#31668 - 從型別檢查中排除
.data目錄以加快構建速度#31738 - 透過提升
purgeCachedData檢查來改進搖樹最佳化#31785
✅ 升級
我們建議升級時執行
npx nuxi@latest upgrade --dedupe
這會重新整理您的 lockfile 並拉取 Nuxt 依賴的所有最新依賴項，尤其是來自 unjs 生態系統的依賴項。
完整的釋出說明
衷心感謝所有參與本次釋出的人。❤️