【vue】关于异步函数使用不当导致的template内容完全无法渲染的问题

news2024/11/24 15:53:36

<script setup>
const fetchProduct = async () => {
  ……
}
await fetchProduct()
</script>

我突然template中的内容完全无法渲染

原因就是基础知识忘了（全栈工程师的通病，这一方面熟了，那一方面就生了）

解决方法是将 fetchProduct 的调用放在一个 onMounted 钩子函数中

onMounted(async () => {
  await fetchProduct()
})

将 fetchProduct 的调用放在 onMounted 钩子函数中的原因是：

异步操作和组件生命周期: fetchProduct 函数是一个异步函数，它使用 await 关键字来等待网络请求的完成。异步操作需要时间，而 Vue 组件的渲染过程是同步的。如果直接在 script setup 中调用 await fetchProduct()，Vue 会尝试立即渲染组件，但此时 fetchProduct 还没有完成，product、carouselItems 和 isLoading 等数据可能仍然是初始值（空对象或 undefined），导致组件渲染为空白或显示错误信息。

onMounted 的作用: onMounted 是 Vue 提供的一个生命周期钩子函数，它会在组件的 DOM 元素被挂载到页面后执行。这意味着，当 onMounted 函数被调用时，Vue 已经完成了组件的初始渲染，并且 DOM 元素已经就绪。将 fetchProduct 的调用放在 onMounted 中，确保了在数据加载完成后再更新组件的视图。这样，Vue 就可以使用加载完成的数据来渲染组件，避免了渲染空白或错误信息的问题。

避免阻塞渲染: 直接在 script setup 中使用 await 会阻塞组件的渲染过程，直到 fetchProduct 完成。这会影响用户体验，因为用户需要等待数据加载完成才能看到任何内容。使用 onMounted 可以避免这个问题，因为 onMounted 在组件渲染完成后执行，不会阻塞渲染过程。

最佳实践: 将异步数据加载操作放在生命周期钩子函数中（如 onMounted、onBeforeMount 等）是 Vue 的最佳实践，它可以确保数据加载的时机正确，并避免潜在的渲染问题。

简而言之，onMounted 提供了一个安全的上下文来执行异步操作，确保在组件已渲染且 DOM 元素可用后才进行数据获取和更新，从而避免渲染问题并提高用户体验。这与 Vue 的响应式系统相协调，确保数据变化后视图能够正确更新。