在 vue 应用中，当表单依赖多个并行 api 调用（如下拉选项数据）时，应避免用布尔数组 + `v-if` 硬判断加载状态；推荐使用 `promise.all()` 统一控制加载流程，并结合响应式状态与组件强制更新机制确保视图准确同步。

处理“等待全部 API 返回后再渲染”的核心问题，关键在于 将异步依赖关系显式建模为 Promise 链或聚合 Promise，而非靠手动维护一组布尔标志位——后者不仅易出错（如你遇到的 v-if 不触发更新），还难以调试和扩展。

✅ 推荐方案：使用 Promise.all() + 响应式加载状态

首先，在 data() 中定义一个单一、可响应的 loading 标志：

data() {
  return {
    loading: true,
    actor: null,
    categories: [],
    motivations: [],
    // ... 其他下拉数据字段
  }
}

然后在 created() 或 mounted() 中，并行发起所有必需的 API 请求，并统一等待它们完成：

created() {
  const apiCalls = [
    API.getActor(this.id),
    API.getCategories(),
    API.getMotivations(),
    API.getDepartments(),
    API.getLocations(),
    // ... 其余 14 个请求（共 14 个 Promise）
  ]

  Promise.all(apiCalls)
    .then(([actorRes, cats, motts, depts, locs, /* ... */]) => {
      this.actor = actorRes.data
      this.categories = cats.data
      this.motivations = motts.data
      this.departments = depts.data
      this.locations = locs.data
      // ... 解构赋值其余数据
    })
    .catch(err => {
      console.error('Failed to load form dependencies:', err)
      // 可选：显示错误提示，或重试逻辑
    })
    .finally(() => {
      this.loading = false
    })
}

模板中直接使用：

⚠️ 为什么你原来的 load_list.every() 没生效？

• Vue 无法侦测到对数组索引直接赋值（如 this.load_list[0] = false）的变更，除非使用 Vue.set() 或替换整个数组；
• 即使修复了响应性，14 个独立 v-if 判断 + 手动管理布尔状态也极易遗漏、顺序错乱，且违背 Vue 的响应式设计哲学。

? 小技巧：若必须保留“分步加载反馈”（如显示各模块进度），可用 computed 包装 Promise.allSettled() 并统计 fulfilled 数量，但主渲染逻辑仍应以“全部就绪”为唯一开关。

? 进阶建议：封装为组合式逻辑（Vue 3 / Vue 2.7+）

若项目已升级，推荐用 composable 抽离通用逻辑：

// composables/useFormDependencies.js
export function useFormDependencies(id) {
  const loading = ref(true)
  const data = reactive({
    actor: null,
    categories: [],
    motivations: [],
    // ...
  })

  const loadAll = async () => {
    try {
      const [actor, cats, motts, /* ... */] = await Promise.all([
        API.getActor(id),
        API.getCategories(),
        API.getMotivations(),
        // ...
      ])
      data.actor = actor.data
      data.categories = cats.data
      data.motivations = motts.data
      // ...
    } finally {
      loading.value = false
    }
  }

  onMounted(loadAll)
  return { loading, ...toRefs(data) }
}

在组件中调用：

setup(props) {
  const { loading, actor, categories, motivations } = useFormDependencies(props.id)
  return { loading, actor, categories, motivations }
}

✅ 总结

• ❌ 避免手动维护布尔数组 + v-if 判断，响应性难保障、可维护性差；
• ✅ 使用 Promise.all() 聚合所有依赖请求，成功后批量赋值，再统一关闭 loading；
• ✅ 模板仅依赖单一响应式状态（如 !loading），语义清晰、性能可控；
• ✅ 如需细粒度控制，优先考虑 async/await + try/catch/fi

  

  nally，而非副作用驱动的标志位。

这样既解决了“视图提前渲染”的问题，也让代码更健壮、可测试、易演进。