VueJS：在计算属性中触发异步函数实现懒加载是否符合最佳实践？

一、当前模式的潜在问题 #

• 违反Vue官方最佳实践：计算属性的设计初衷是纯函数，仅依赖响应式状态返回计算结果，不应包含异步副作用。虽然当前代码能运行，但计算属性的执行时机不可控——组件重渲染时可能因其他依赖变更，导致计算属性多次执行（即使加了waiting锁，也存在逻辑隐患）。
• 调试难度高：异步副作用和计算属性耦合，后续排查渲染相关问题时，很难追踪请求触发的时机和原因。
• 不符合响应式逻辑预期：计算属性的返回值应与依赖同步，而此处返回值是异步更新的，容易让其他维护者误解逻辑。

二、更贴合需求的替代方案 #

1. 使用watchEffect实现触发逻辑 #

这是官方推荐的替代方式，既能实现「属性被使用时触发请求」，又能遵守响应式规则：

const _title = ref('')
const title = computed(() => _title.value)

watchEffect((onInvalidate) => {
  // 仅当title被模板/其他响应式逻辑使用时，副作用才会执行
  if (_title.value === '') {
    let canceled = false
    // 组件卸载或依赖变更时，标记请求取消
    onInvalidate(() => { canceled = true })
    
    const load = async () => {
      try {
        const res = await axios.get(url)
        if (!canceled) _title.value = res.data
      } catch (e) {
        // 按需处理请求错误
      }
    }
    load()
  }
})

• 优势：自动追踪依赖，仅在title被实际使用时触发请求；支持组件卸载时取消请求，避免内存泄漏。

2. 封装为可复用的Composition函数 #

如果该逻辑需要在多个组件复用，推荐封装成自定义函数：

function useLazyFetch(url, initialValue = '') {
  const data = ref(initialValue)
  const waiting = ref(false)

  const fetchData = async () => {
    if (waiting.value) return
    waiting.value = true
    try {
      const res = await axios.get(url)
      data.value = res.data
    } catch (e) {
      // 错误处理逻辑
    } finally {
      waiting.value = false
    }
  }

  watchEffect((onInvalidate) => {
    if (data.value === initialValue) {
      let canceled = false
      onInvalidate(() => { canceled = true })
      fetchData().then(() => {
        if (canceled) data.value = initialValue
      })
    }
  })

  return computed(() => data.value)
}

// 组件内使用示例
const title = useLazyFetch(url)

3. 模板配合v-if触发（适合简单场景） #

如果仅在模板特定条件下使用title，可以直接通过条件监听触发：

<template>
  <div v-if="shouldShowTitle">
    {{ title }}
  </div>
</template>

<script setup>
const shouldShowTitle = ref(false)
const _title = ref('')
const title = computed(() => _title.value)

const loadTitle = async () => {
  // 请求逻辑
  _title.value = (await axios.get(url)).data
}

watch(shouldShowTitle, (newVal) => {
  if (newVal && _title.value === '') {
    loadTitle()
  }
})
</script>

三、总结 #

当前计算属性触发异步请求的模式虽然能运行，但长期维护成本高，不符合Vue的设计理念。优先选择watchEffect方案，既能满足「属性被使用时自动加载」的需求，又能保证代码的可维护性和响应式逻辑的正确性。

内容的提问来源于stack exchange，提问作者cp-jung