参与本次发布的所有 Nuxters 祝您和您的家人圣诞快乐!🎁🎄
我们在 v3.9 中塞入了大量功能,迫不及待想让大家尝试一下。
⚡️ Vite 5
本次发布支持 Vite 5 和 Rollup 4。模块开发者可能需要检查一下,确保您创建的任何 Vite 插件与这些最新版本兼容。
此次升级带来了大量卓越的改进和 Bug 修复——查看Vite 更新日志以获取更多信息。
✨ 适配 Vue 3.4
此版本已通过最新的 Vue 3.4 发布候选版(RC)测试,并具备了利用Vue 3.4 新特性所需的必要配置,包括在生产环境中调试注水(hydration)错误(只需在您的 Nuxt 配置中设置 debug: true)。
👉 若要使用此功能,只需在 v3.4 正式发布后更新您的 vue 版本,或者立即尝试发布候选版。
{
"dependencies": {
"nuxt": "3.9.0",
"vue": "3.4.0-rc.1",
"vue-router": "latest"
}
}
🏝️ 交互式服务器组件
这是一个高度实验性的更新,但现在可以在 Nuxt 服务器组件内尝试使用交互式组件了。除了组件岛(component islands)外,您还需要额外启用此功能。
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: true
}
}
})
现在,在服务器组件内部,您可以使用 nuxt-client 指令来指定需要注水的组件。
<NuxtLink :to="/" nuxt-client />
我们对此感到非常兴奋——请务必告诉我们您的使用感受!🙏
🔥 自动服务器优化
我们现在利用 Vite 新的 AST 感知 '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
我们现在为 <NuxtLoadingIndicator> 提供了一个基于钩子(hook)的新系统,包括一个 useLoadingIndicator 组合式函数,让您可以控制/停止/启动加载状态。如果您愿意,也可以挂载到 page:loading:start 和 page:loading:end 上。
🏁 在 callOnce 中运行单次事件
有时,无论页面加载多少次,您都只想运行一次代码——并且如果它已在服务器上运行,您就不希望它在客户端再次运行。
为此,我们提供了一个新的工具:callOnce(#24787).
<script setup>
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('This will only be logged once')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
请注意,此工具是上下文感知的,因此它必须像其他 Nuxt 组合式函数一样,在组件的 setup 函数或 Nuxt 插件中调用。
🚨 错误类型
长期以来,useAsyncData 和 useFetch 返回的错误都被泛化为 Error 类型。我们显著改进了它们的类型可能性,使其在您实际接收到的内容方面更加准确。(我们在底层使用 h3 的 createError 工具来规范化错误,以便它们可以从服务器序列化到客户端等。)
我们尽量以向后兼容的方式实现类型更改,但如果您手动配置了这些组合式函数的泛型,您可能会注意到需要更新泛型。查看(#24396)以获取更多信息,如果您遇到任何问题,请务必告诉我们。
🔥 Schema 性能
在此版本中,我们花了一些时间进行了一些微小的性能改进,因此您应该会发现某些操作变得更快了。这是一个持续进行的项目,我们已有关于提高 Nuxt 开发服务器初始加载时间的想法。
✅ 升级
像往常一样,我们建议您运行以下命令进行升级
npx nuxi upgrade
完整发布说明
感谢你阅读到这里!我们希望你喜欢这个新版本。如果你有任何反馈或问题,请告诉我们。
祝您 Nuxting 愉快 ✨