非常祝福你和你的家人圣诞快乐!🎁🎄
我们在 3.9 版本中添加了很多功能,非常期待你的尝试。
⚡️ Vite 5
此版本附带了 Vite 5 和 Rollup 4 的支持。模块作者可能需要检查你所创建的任何 vite 插件是否与这些最新版本兼容。
这个版本带来了许多改进和 bug 修复 - 查看 Vite 的更改日志 了解更多信息。
✨ Vue 3.4 兼容
此版本已经与最新的 Vue 3.4 发布候选版进行了测试,并具有利用 Vue 3.4 的新功能 所需的配置,包括在生产环境中调试水合错误(只需在你的 Nuxt 配置中设置 debug: true
)。
👉 要使用这些功能,请在 v3.4 发布后更新你的 vue
版本,或者立即尝试发布候选版:
{
"dependencies": {
"nuxt": "3.9.0",
"vue": "3.4.0-rc.1",
"vue-router": "latest"
}
}
🏝️ 交互式服务器组件
这是一个非常实验性的更新,但现在你可以在 Nuxt 服务器组件中玩耍交互式组件了。除了组件岛之外,你还需要启用这个新功能:
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: true
}
}
})
现在,在服务器组件中,你可以使用 nuxt-client
指令指定要进行混合的组件:
<NuxtLink :to="/" nuxt-client />
我们对这个功能非常激动 - 所以请告诉我们你是如何使用它的!🙏
🔥 自动服务器端优化
我们现在使用 Vite 的新的 AST-aware 'define' 来执行服务器端代码上的更准确的替换,这意味着像下面这样的代码将不再抛出错误:
<script setup lang="ts">
if (document) {
console.log(document.querySelector('div'))
}
</script>
直到现在这是不可能的,因为我们不想冒险意外替换在你的应用程序的非 JS 部分中的普通单词,比如 document
。但 Vite 的新的 define
功能由 esbuild
驱动,并且具有语法感知功能,所以我们对启用该功能感到有信心。不过,如果你需要的话,你可以选择退出:
export default defineNuxtConfig({
hooks: {
'vite:extendConfig' (config) {
delete config.define!.document
}
}
})
🚦 粒度化加载 API
我们现在有了一个新的基于 hook 的系统来处理 <NuxtLoadingIndicator>
,包括一个 useLoadingIndicator
可组合函数,可以让你控制/停止/启动加载状态。如果你喜欢的话,你还可以挂钩到 page:loading:start
和 page:loading:end
。
🏁 在 callOnce
中运行单个事件
有时你只希望无论你加载页面多少次,都只运行代码一次 - 并且如果它在服务器上运行过了,你也不希望在客户端再次运行它。
为此,我们有一个新的实用工具:callOnce
(#24787)。
<script setup>
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('此消息只会被记录一次')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
请注意,这个实用工具是上下文感知的,因此 _必须_在组件的设置函数或 Nuxt 插件中调用,就像其他 Nuxt 可组合一样。
🚨 错误类型
从一段时间以来,useAsyncData
和 useFetch
返回的错误被类型化得相当泛化,都是 Error
类型。为了让它们更准确地反映你实际接收到的内容,我们对它们的类型可能性进行了重大改进。 (我们在幕后使用 h3
的 createError
实用工具来标准化错误,这样它们就可以从服务器序列化到客户端,例如。)
我们试图以向后兼容的方式实现这个类型变更,但如果你在手动配置这些可组合函数的泛型时注意到需要更新泛型,请查看 (#24396) 以获取更多信息,如果你遇到任何问题,请告诉我们。
🔥 模式性能
在这个版本中,我们花了一些时间做了一些轻微的性能改进,所以你应该会注意到一些东西速度更快了。这是一个持续进行的项目,我们有一些想法来提高 Nuxt 开发服务器的初始加载时间。
✅ 升级
和往常一样,我们建议升级运行:
npx nuxi upgrade
完整的发布说明
感谢你阅读到这里!我们希望你喜欢这个新版本。如果你有任何反馈或问题,请告诉我们。
快乐使用 Nuxt ✨