useLazyAsyncData
这个 useAsyncData 的包装器会立即触发导航。
介绍
默认情况下，useAsyncData 会阻止导航，直到其异步处理器解析完成。useLazyAsyncData 提供了一个基于 useAsyncData 的包装器，通过将 lazy 选项设置为 true，使导航在处理器解析之前就被触发。
useLazyAsyncData 与 useAsyncData 拥有相同的签名。示例
pages/index.vue
<script setup lang="ts">
/* 导航会在数据获取完成之前发生。
请在组件的模板中直接处理 'pending' 和 'error' 状态
*/
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
// 因为 count 可能初始化为 null，您无法立即访问它的内容，但您可以监听它的变化。
})
</script>
<template>
<div>
{{ status === 'pending' ? '加载中' : count }}
</div>
</template>
useLazyAsyncData 是编译器转换的保留函数名，因此您不应该将自己的函数命名为 useLazyAsyncData。