🧪 延迟水合宏
在 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)
})
})
📊 可观测性增强
页面路由现在已暴露给 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 生态系统的依赖项。
完整的发布说明
非常感谢所有参与此版本发布的人。在接下来的六个月中,我们将继续向后移植兼容的 v4 功能和错误修复,所以请继续提供反馈!❤️