Vue项目中loading卡死的问题及解决方案

<template>
  <div v-if="isLoading">加载中，请稍候...</div>
  <div v-else>
    <!-- 正常内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(false)

const loadData = async () => {
  isLoading.value = true
  await fetchHeavyData() // 假设这个函数运行时间较长
  isLoading.value = false
}
</script>

isLoading.value = true

await fetchHeavyData()

setState(loading=true)
heavySyncTask()
// UI 还没来得及渲染，就被卡住了

const loadData = async () => {
  isLoading.value = true
  await nextTick() // 强制渲染 Loading

  await fetchHeavyData()
  isLoading.value = false
}

function fetchHeavyData() {
  const raw = getRawData()
  const processed = raw.map(x => compute(x)) // 耗时
  return processed
}

async function fetchHeavyData() {
  const raw = getRawData()
  const result = []
  for (let i = 0; i < raw.length; i++) {
    result.push(compute(raw[i]))
    if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)) // 释放主线程
  }
  return result
}

<template>
  <div v-if="visible" class="ai-loading">
    <svg>...</svg>
    <p>{{ text }}</p>
  </div>
</template>

<script setup>
defineProps({
  visible: Boolean,
  text: {
    type: String,
    default: '正在分析，请稍候...'
  }
})
</script>

<AiLoading :visible="isLoading" text="AI 正在写日报" />

export function useAsyncTask(fn) {
  const isLoading = ref(false)
  const run = async (...args) => {
    isLoading.value = true
    await nextTick()
    const result = await fn(...args)
    isLoading.value = false
    return result
  }
  return { run, isLoading }
}

const { run: fetch, isLoading } = useAsyncTask(fetchHeavyData)
await fetch()