50K Star，巨大的里程碑，Nuxt 新版本的 7 个新特性值得关注！
今天是坚持日更的第149天，如果本文对您有帮助，记得点击关注、点赞、在看支持我
🎉 Nuxt 巨大的里程碑
Nuxt 是一个免费的开源框架，可通过直观、可扩展的方式使用 Vue.js 创建类型安全、高性能、生产级的全栈网络应用程序和网站。
今天，Nuxt 迎来了新的里程碑，Github star 数突破 50K，不容易，祝贺🎉！
🔥 Nuxt 3.9 这个 7 个新特性值得关注
Nuxt 3.9 带来了很多新的特性，该版本支持 Vite 5 和 Rollup 4。本文将重点介绍如下 7 个值得关注的特性：
生产环境中调试 Hydrate 错误 新的 useRequestHeader组合性自定义布局回退 将依赖项添加到自定义插件中 对加载 UI 进行细粒度控制 新的 callOnce 可组合功能-非常有用！ 重复请求--适用于 useFetch 和 useAsyncData 可组合项
1.生产环境中调试 Hydrate 错误
Hydrate 错误是 SSR 的最棘手的问题之一，特别是当它们只发生在生产环境中时。幸运的是，Vue 3.4让我们能够做到这一点。
在 Nuxt 中，我们只需要更新我们的配置：
export default defineNuxtConfig({
debug: true,
// rest of your config...
})
如果您没有使用 Nuxt，可以使用新的编译时标记启用此功能：__vue_prod_hydration_mismatch_details__。这就是 Nuxt 使用的方法。
根据您使用的构建工具，启用标志的方式也有所不同，但如果您使用的是 Vite，那么 vite.config.js 文件中的内容就是这样：
import { defineConfig } from 'vite'
export default defineConfig({
define: {
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
}
})
打开此开关将增加您的捆绑包大小，但对于追踪这些讨厌的 Hydrate 错误非常有用。
2.使用 useRequestHeader
在 Nuxt 中，从请求中获取单个头部是非常简单的：
const contentType = useRequestHeader('content-type');
这在中间件和服务器路由中非常方便，可用于检查身份验证或其他任何功能。不过，如果您在浏览器中，它将返回未定义。这是 useRequestHeaders 的一个抽象，因为很多时候你只需要一个头文件。
3.Nuxt 布局回退
如果您正在使用 Nuxt 处理复杂的网络应用程序，您可能需要更改默认布局：
<NuxtLayout fallback="differentDefault">
<NuxtPage />
</NuxtLayout>
通常情况下，如果没有通过 definePageMeta、setPageLayout 或直接在 NuxtLayout 组件上指定其他布局，NuxtLayout 组件将使用默认布局。
这非常适合大型应用程序，您可以为应用程序的每个部分提供不同的默认布局。
4.Nuxt 插件依赖关系
为 Nuxt 编写插件时，您可以指定依赖关系：
export default defineNuxtPlugin({
name: 'my-sick-plugin-that-will-change-the-world',
dependsOn: ['another-plugin']
async setup (nuxtApp) {
// The setup is only run once `another-plugin` has been initialized
}
})
但我们为什么需要这样做呢？
通常，插件是按顺序初始化的，即根据它们在文件系统中的顺序：
plugins/
- 01.firstPlugin.ts // Use numbers to force non-alphabetical order
- 02.anotherPlugin.ts
- thirdPlugin.ts
但我们也可以并行加载它们，如果它们互不依赖，就能加快速度：
export default defineNuxtPlugin({
name: 'my-parallel-plugin',
parallel: true,
async setup (nuxtApp) {
// Runs completely independently of all other plugins
}
})
不过，有时我们会有其他依赖于这些并行插件的插件。通过使用 dependsOn 键名，我们可以让 Nuxt 知道我们需要等待哪些插件，即使它们是并行运行的：
export default defineNuxtPlugin({
name: 'my-sick-plugin-that-will-change-the-world',
dependsOn: ['my-parallel-plugin']
async setup (nuxtApp) {
// Will wait for `my-parallel-plugin` to finish before initializing
}
})
虽然很有用，但您可能实际上并不需要这项功能。
5.Nuxt Loading API
在 Nuxt 中，我们可以通过 useLoadingIndicator 可组合工具获得页面加载的详细信息：
const {
progress,
isLoading,
} = useLoadingIndicator();
console.log(`Loaded ${progress.value}%`); // 34%
它由 <NuxtLoadingIndicator> 组件内部使用，可通过 page:loading:start 和 page:loading:end 钩子触发（如果你正在编写插件）。
但我们对加载指示器的操作方式有很多控制权：
const {
progress,
isLoading,
start, // Start from 0
set, // Overwrite progress
finish, // Finish and cleanup
clear // Clean up all timers and reset
} = useLoadingIndicator({
duration: 1000, // Defaults to 2000
throttle: 300, // Defaults to 200
});
我们可以专门设置持续时间，这是计算进度百分比所必需的。节流阀值可控制进度值的更新速度--如果您希望平滑处理大量交互，这将非常有用。
完成和清除之间的区别很重要。清除会重置所有内部计时器，但不会重置任何值。
为此需要使用 finish 方法，它能使用户体验更加优雅。它会将进度设置为 100，isLoading 设置为 true，然后等待半秒（500 毫秒）。之后，它会将所有值重置回初始状态。
6.Nuxt callOnce
如果您只需要运行一段代码一次，那么 Nuxt 可用于此（自3.9 起）：
<script setup>
await callOnce(async () => {
// This will only be run one time, even with SSR
});
</script>
使用 callOnce 可以确保代码只执行一次，无论是在 SSR 期间在服务器上执行，还是在用户导航到新页面时在客户端执行。
您可以认为这与路由中间件类似--每次路由加载只执行一次。除了 callOnce 不会返回任何值，它可以在任何可以放置可组合代码的地方执行。
它还有一个类似于 useFetch 或 useAsyncData 的键，以确保它能跟踪哪些已执行，哪些未执行：
<script setup>
['one', 'two', 'three'].forEach(item => {
// Run once for each item
callOnce(item, async () => {
// Do something with the item
});
});
</script>
默认情况下，Nuxt 将使用文件和行号自动生成唯一密钥，但这并非在所有情况下都有效。
7.Nuxt 中的重复数据提取
自 3.9 版本起，我们可以使用 dedupe 参数控制 Nuxt 重复数据提取的方式：
useFetch('/api/menuItems', {
dedupe: 'cancel' // Cancel the previous request and make a new request
});
当参数更新时，useFetch 可组合（和 useAsyncData 可组合）将反应式地重新获取数据。默认情况下，它们会取消前一个请求，并使用新参数发起一个新请求。
不过，你也可以改变这种行为，转而延迟现有的请求--当有一个待处理的请求时，将不会发出新的请求：
useFetch('/api/menuItems', {
dedupe: 'defer' // Keep the pending request and don't initiate a new one
});
这样，我们就能更好地控制数据加载和请求的方式。
最后，如果想详细了解 Nuxt 3.9 版本的特性，可以参考官网文档。
关注FED实验室(前端开发实验室)获取更多前端热点资讯、技术实践、面试招聘等精彩内容。
大家都在看