---
title: "Nuxt 3.9"
description: "Nuxt 3.9 已发布 - 来自 Nuxt 团队的一份圣诞礼物，带来了 Vite 5、交互式服务器组件、新的可组合函数、新的加载 API 等更多内容。"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-9"
---
# Nuxt 3.9

> Nuxt 3.9 已发布 - 来自 Nuxt 团队的一份圣诞礼物，带来了 Vite 5、交互式服务器组件、新的可组合函数、新的加载 API 等更多内容。

非常祝福你和你的家人圣诞快乐！🎁🎄

我们在 3.9 版本中添加了很多功能，非常期待你的尝试。

### ⚡️ Vite 5

此版本附带了 Vite 5 和 Rollup 4 的支持。模块作者可能需要检查你所创建的任何 vite 插件是否与这些最新版本兼容。

这个版本带来了许多改进和 bug 修复 - 查看 [Vite 的更改日志](https://vite.zhcndoc.com/guide/migration.html#migration-from-v4) 了解更多信息。

### ✨ Vue 3.4 兼容

此版本已经与最新的 Vue 3.4 发布候选版进行了测试，并具有利用 [Vue 3.4 的新功能](https://blog.vuejs.org/posts/vue-3-4) 所需的配置，包括在生产环境中调试水合错误（只需在你的 Nuxt 配置中设置 `debug: true`）。

👉 要使用这些功能，请在 v3.4 发布后更新你的 `vue` 版本，或者立即尝试发布候选版：

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

### 🏝️ 交互式服务器组件

这是一个非常实验性的更新，但现在你可以在 Nuxt 服务器组件中玩耍交互式组件了。除了组件岛之外，你还需要启用这个新功能：

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

现在，在服务器组件中，你可以使用 `nuxt-client` 指令指定要进行混合的组件：

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

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

### 🔥 自动服务器端优化

我们现在使用 Vite 的新的 AST 感知的 'define' 来执行服务器端代码上更准确的替换，这意味着像下面这样的代码将不再抛出错误：

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

直到现在这是不可能的，因为我们不想冒险意外替换在你的应用程序的非 JS 部分中的普通单词，比如 `document`。但 Vite 的新的 `define` 功能由 `esbuild` 驱动，并且具有语法感知功能，所以我们对启用该功能感到有信心。不过，如果你需要的话，你可以选择退出：

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

### 🚦 粒度化加载 API

我们现在有了一个新的基于 hook 的系统来处理 [`<NuxtLoadingIndicator>`](https://nuxt.zhcndoc.com/docs/api/components/nuxt-loading-indicator)，包括一个 `useLoadingIndicator` 可组合函数，可以让你控制/停止/启动加载状态。如果你喜欢的话，你还可以挂钩到 `page:loading:start` 和 `page:loading:end`。

::tip
可以在文档中 [阅读更多](https://nuxt.zhcndoc.com/docs/api/composables/use-loading-indicator)，以及在原始 PR ([#24010](https://github.com/nuxt/nuxt/pull/24010)) 中了解更多。
::

### 🏁 在 `callOnce` 中运行单个事件

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

为此，我们有一个新的实用工具：[`callOnce`](https://nuxt.zhcndoc.com/docs/api/utils/call-once) ([#24787](https://github.com/nuxt/nuxt/pull/24787))。

```vue [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{to="https://nuxt.zhcndoc.com/docs/api/utils/call-once"}
::

### 🚨 错误类型

从一段时间以来，`useAsyncData` 和 `useFetch` 返回的错误被类型化得相当泛化，都是 `Error` 类型。为了让它们更准确地反映你实际接收到的内容，我们对它们的类型可能性进行了重大改进。 （我们在幕后使用 `h3` 的 `createError` 实用工具来标准化错误，这样它们就可以从服务器序列化到客户端，例如。）

我们试图以向后兼容的方式实现这个类型变更，但如果你在手动配置这些可组合函数的泛型时注意到需要更新泛型，请查看 ([#24396](https://github.com/nuxt/nuxt/pull/24396)) 以获取更多信息，如果你遇到任何问题，请告诉我们。

### 🔥 模式性能

在这个版本中，我们花了一些时间做了一些轻微的性能改进，所以你应该会注意到一些东西速度更快了。这是一个持续进行的项目，我们有一些想法来提高 Nuxt 开发服务器的初始加载时间。

## ✅ 升级

和往常一样，我们建议升级运行：

```sh
npx nuxi upgrade
```

## 完整的发布说明

::read-more{to="https://github.com/nuxt/nuxt/releases/tag/v3.9.0" icon="i-simple-icons-github"}
阅读 Nuxt `v3.9.0` 的完整发布说明。
::

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

**快乐使用 Nuxt ✨**


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.