Vue.js中watchEffect的异步问题及解决方案

import { ref, watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log('Count is:', count.value)
})

const data = ref(null)
const isLoading = ref(true)

watchEffect(async () => {
  console.log(isLoading.value) // 同步部分，会被收集
  
  if (isLoading.value) {
    // 异步部分，依赖可能不会被正确收集
    data.value = await fetchData()
    isLoading.value = false
  }
})

watchEffect(async () => {
  const response = await fetch('/api/data')
  data.value = await response.json() // 修改 data 可能再次触发 watchEffect
})

const count = ref(0)

watchEffect(() => {
  console.log('Count changed to:', count.value)
})

const increment = () => {
  count.value++
  console.log('Count incremented:', count.value)
}

increment()
// 输出顺序:
// Count incremented: 1
// Count changed to: 1

watchEffect(async () => {
  // 同步读取所有需要的依赖
  const currentIsLoading = isLoading.value
  const currentType = props.type
  
  if (currentIsLoading) {
    // 异步操作放在最后
    data.value = await fetchData(currentType)
  }
})

watchEffect(async (onInvalidate) => {
  const controller = new AbortController()
  
  onInvalidate(() => {
    controller.abort() // 取消未完成的请求
  })
  
  try {
    const response = await fetch('/api/data', {
      signal: controller.signal
    })
    data.value = await response.json()
  } catch (e) {
    if (e.name !== 'AbortError') {
      console.error('Fetch error:', e)
    }
  }
})

watchEffect(
  () => {
    // 回调逻辑
  },
  {
    flush: 'post' // 在组件更新后执行
  }
)

const fetchData = async (type) => {
  const response = await fetch(`/api/data?type=${type}`)
  return response.json()
}

watchEffect(() => {
  const { type } = props // 只在这里收集依赖
  
  // 使用 then 而不是 async/await 以避免依赖收集问题
  fetchData(type).then(result => {
    data.value = result
  })
})

watch(
  () => props.type,
  async (type) => {
    data.value = await fetchData(type)
  },
  { immediate: true }
)