v3.17
GitHub
Release·  

Nuxt 3.17

Nuxt 3.17 发布 - 带来了对异步数据层的重大重构，一个新的内置组件，更好的警告和性能改善！
Daniel Roe

Daniel Roe

@danielroe.dev

📊 数据获取改进

Nuxt 的数据获取层进行了重大重组，带来了对 useAsyncData 和 useFetch 的显著改进。

尽管我们旨在保持向后兼容，并将重大变更置于 experimental.granularCachedData 标志之下（默认禁用），但我们建议在升级后彻底测试您的应用。如果您依赖于在卸载使用 useAsyncData 的组件后缓存数据永远可用，您还可以禁用 experimental.purgeCachedData 以恢复到以前的行为。

阅读原始 PR 以获取完整详情。

跨组件的一致数据

现在所有使用相同键的 useAsyncData 或 useFetch 调用共享底层 ref，确保应用程序跨组件的一致性：

<!-- ComponentA.vue -->
<script setup>
const { data: users, pending } = useAsyncData('users', fetchUsers)
</script>

<!-- ComponentB.vue -->
<script setup>
// 这将引用与 ComponentA 相同的数据状态
const { data: users, status } = useAsyncData('users', fetchUsers)
// 当任一组件刷新数据时，两个组件都会保持一致更新
</script>

这解决了组件可能存在不一致数据状态的各种问题。

响应式键

现在您可以使用计算的 refs、普通 refs 或获取函数作为键：

const userId = ref('123')
const { data: user } = useAsyncData(
  computed(() => `user-${userId.value}`),
  () => fetchUser(userId.value)
)

// 更改 userId 将自动触发新的数据获取
// 如果没有其他组件在使用旧数据，则会清除旧数据
userId.value = '456'

优化数据重新获取

多个组件监视相同数据源时，当依赖项更改时现在只会触发一次数据获取：

// 在多个组件中：
const { data } = useAsyncData(
  'users', 
  () => $fetch(`/api/users?page=${route.query.page}`),
  { watch: [() => route.query.page] }
)

// 当 route.query.page 更改时，仅会发生一次获取操作
// 所有使用此键的组件将同时更新

🎭 内置 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">重试</button>
    </div>
  </template>
  
  <!-- 可能会出错的内容 -->
  <MyComponent />
</NuxtErrorBoundary>

🔗 路由改进

<NuxtLink> 现在接受 trailingSlash 属性，让您对 URL 格式有更多控制 (#31820)：

<NuxtLink to="/about" trailing-slash>关于</NuxtLink>
<!-- 将渲染 <a href="/about/"> -->

🔄 加载指示器自定义

现在您可以直接在组件上用新属性自定义加载指示器 (#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 以加快文件 Glob 操作 #31668
  • 排除 .data 目录的类型检查以加快构建速度 #31738
  • 通过提升 purgeCachedData 检查改进树摇 #31785

✅ 升级

我们推荐的升级方法是运行：

npx nuxi@latest upgrade --dedupe

这将刷新您的锁定文件并拉取所有 Nuxt 依赖的最新版本，特别是来自 unjs 生态系统的依赖。

完整发布说明

阅读 Nuxt v3.17.0 的完整发布说明。

非常感谢所有参与此次发布的每一个人。❤️

← 返回博客
Nuxt on LinkedInNuxt on X