发布·  

Nuxt 3.18

Nuxt 3.18 发布了——它将 v4 的功能带到了 v3,改进了可访问性,更好地集成了浏览器开发工具,并提升了性能!
Daniel Roe

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

来自 vueonWatcherCleanup 函数现在可以自动导入(#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)
  })
})

📊 可观测性增强

页面路由现在已暴露给 Nitro 以实现可观测性#32617),从而更好地与受支持的平台进行监控和分析集成。这使得可观测性工具能够更有效地跟踪页面级指标。

🔧 模块开发改进

模块作者获得了一些生活质量改进

简化服务器导入

addServerImports kit 工具现在支持单个导入#32289),使其更容易添加单个服务器实用程序

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

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

TypeScript 配置

模块现在可以添加到 typescript.hoist#32601),从而更好地控制 TypeScript 配置和类型生成。

⚡️ 性能改进

我们进行了一些性能优化

  • 通过内部 socket 改进 Vite-node 通信#32417),以加快开发构建速度
  • 迁移到 oxc-walker (#32250)和 oxc 用于 onPrehydrate 转换#32045),以加快代码转换速度

🐛 错误修复

此版本还包括一些重要的修复

  • 改进数据获取:当计算键更改时,旧数据现在会正确保留(#32616)
  • 更好的滚动行为scrollBehaviorType 现在仅用于哈希滚动(#32622)
  • 修复目录别名:为了一些目录别名添加了尾部斜杠,以获得更好的一致性(#32755)

✅ 升级

像往常一样,我们建议您运行以下命令进行升级

npx nuxi@latest upgrade --dedupe

这会刷新您的 lockfile 并拉取 Nuxt 依赖的所有最新依赖项,尤其是来自 unjs 生态系统的依赖项。

完整的发布说明

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

非常感谢所有参与此版本发布的人。在接下来的六个月中,我们将继续向后移植兼容的 v4 功能和错误修复,所以请继续提供反馈!❤️