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实验室(前端开发实验室)获取更多前端热点资讯、技术实践、面试招聘等精彩内容。
大家都在看