Nuxt3 中文课程《实战全栈开发简书》限时优惠
Release·  

Nuxt 3.9

Nuxt 3.9发布了 - 这是Nuxt团队送给你的圣诞礼物,带来了Vite 5、交互式服务器组件、新的组合API等等。

祝你和你的家人圣诞快乐!🎁🎄

我们在v3.9中添加了许多功能,迫不及待地想让你来尝试。

⚡️ Vite 5

这个版本集成了Vite 5和Rollup 4支持。模块作者可能需要检查一下,确保你创建的任何Vite插件与这些最新版本兼容。

这个版本带来了许多改进和bug修复 - 请查看 Vite的更新日志 以获取更多信息。

✨ Vue 3.4 准备就绪

这个版本经过了最新的Vue 3.4版本候选版的测试,并且具有必要的配置,以利用 Vue 3.4中的新功能,包括在生产环境中调试hydration错误(只需在你的Nuxt配置中设置 debug: true)。

👉 要享受这些新功能,只需在v3.4发布后更新你的 vue 版本,或者今天就尝试一下发布候选版:

package.json
{
  "dependencies": {
    "nuxt": "3.9.0",
    "vue": "3.4.0-rc.1",
    "vue-router": "latest"
  }
}

🏝️ 交互式服务器组件

这是一个高度实验性的更新,但现在可以在Nuxt服务器组件中使用交互式组件。你需要额外启用这个新功能以及组件岛:

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true
    }
  }
})

现在,在服务器组件中,你可以使用 nuxt-client 指令来指定要hydrate的组件:

components/SomeComponent.server.vue
<NuxtLink :to="/" nuxt-client />

我们对这个功能非常兴奋 - 所以请告诉我们你是如何使用它的!🙏

🔥 自动服务器优化

我们现在使用Vite的新AST-aware 'define'来对服务器端代码执行更准确的替换,这意味着像这样的代码将不再抛出错误:

app.vue
<script setup lang="ts">
if (document) {
  console.log(document.querySelector('div'))
}
</script>

直到现在,这是不可能的,因为我们不想冒险在应用程序的非JS部分中意外替换诸如 document 这样的普通单词。但是Vite的新 define 功能由 esbuild 提供支持,它具有语法意识,因此我们有信心启用这个功能。不过,如果需要的话,你可以选择退出:

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'vite:extendConfig' (config) {
      delete config.define!.document
    }
  }
})

🚦 精细的加载API

我们现在有了一个基于hook的新系统用于 <NuxtLoadingIndicator>,包括一个 useLoadingIndicator 组合,让你控制/停止/启动加载状态。你也可以选择钩入 page:loading:startpage:loading:end

You can read more in the docs and in the original PR (#24010).

🏁 在 callOnce 中运行单一事件

有时你只想运行一次代码,无论你加载页面多少次 - 并且如果它在服务器上运行过,你不希望在客户端再次运行。

为此,我们有一个新的实用程序:callOnce (#24787)。

app.vue
<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组合一样。

Read more in Docs > API > Utils > Call Once.

🚨 错误类型

有一段时间以来,useAsyncDatauseFetch 返回的错误类型被类型化为相当通用的 Error。我们已经显着改进了它们的类型可能性,以使它们在实际接收到的内容上更准确(我们在底层使用 h3 createError 实用程序来规范化错误,以便在服务器到客户端进行序列化)。

我们尝试以向后兼容的方式实现类型更改,但如果你手动配置这些组合的泛型,你可能会注意到需要更新泛型。请查看 (#24396) 获取更多信息,如果你遇到任何问题,请告诉我们。

🔥 架构性能

在这个版本中,我们花了一些时间进行一些小的性能改进,所以你应该注意到某些东西变得更快了。这是一个持续的项目,我们有改进Nuxt开发服务器的初始加载时间的想法。

✅ 升级

像往常一样,我们建议你运行:

npx nuxi upgrade

完整的发布说明

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

感谢你读到这里!希望你喜欢这个新版本。如果你有任何反馈或问题,请告诉我们。

Nuxting愉快 ✨