在 Vue 3 中使用 Composition API 时，为什么不能在条件语句或循环中调用 ref 或 reactive？

在 Vue 3 中使用 Composition API 时，为什么不能在条件语句或循环中调用 ref 或 reactive？

回答与解析：
在 Vue 3 的 Composition API 中，像 ref()、reactive()、computed() 以及生命周期钩子（如 onMounted）等响应式函数依赖于一个内部的“当前活跃 effect”上下文（通过一个全局变量 activeEffect 实现）。这个机制要求这些函数必须在组件 setup() 函数的顶层同步执行，以确保它们能正确地被收集到当前组件实例的依赖关系中。

如果将 ref() 或 reactive() 放在 if 条件、for 循环或异步回调中，会导致以下问题：

1. 响应式绑定丢失：Vue 无法在组件初始化时稳定地追踪这些响应式变量，因为它们的创建时机不确定，可能在某些渲染中存在，某些不存在。
2. 破坏响应式系统的依赖收集机制：Vue 的响应式系统依赖于函数调用顺序的一致性。条件或循环会改变调用顺序或次数，导致依赖收集错乱，进而引发 bug 或内存泄漏。
3. 违反“调用约定”（Call Convention）：Vue 明确规定 Composition API 函数必须在 setup() 的顶层调用，不能在条件、循环或嵌套函数中调用，这是为了保证响应式系统的可预测性和稳定性。

✅ 正确做法示例：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0) // ✅ 顶层调用

    onMounted(() => {
      // 异步或条件逻辑可放在生命周期或方法内部
      if (count.value > 0) {
        console.log('Count is positive')
      }
    })

    return { count }
  }
}

❌ 错误做法示例：

setup() {
  if (someCondition) {
    const count = ref(0) // ❌ 不允许在条件中调用 ref
  }
}

总结：为了保证 Vue 响应式系统的正确性和可维护性，所有 Composition API 的响应式函数必须在 setup() 的顶层同步调用，不能置于条件、循环或异步逻辑中。