在 Vue 3 中，为什么不能在 setup() 外部直接使用响应式变量（如 ref 或 reactive）并期望其自动更新视图？

在 Vue 3 中，为什么不能在 setup() 外部直接使用响应式变量（如 ref 或 reactive）并期望其自动更新视图？

回答：
因为在 Vue 3 的 Composition API 中，只有在 setup() 函数内部或由它返回的响应式变量，才会被 Vue 的响应式系统追踪。如果你在组件外部（例如模块顶层）定义一个 ref 或 reactive 对象，并在模板中直接使用它，Vue 无法将其与当前组件实例关联，因此不会触发视图更新。

解析：
Vue 的响应式系统依赖于“副作用收集”机制（通过 effect 和 track/trigger 实现）。当组件渲染时，setup() 返回的响应式数据会被访问，从而建立依赖关系。而组件外部定义的响应式变量虽然本身具有响应性（即值变化时会触发 trigger），但由于没有与任何组件的渲染 effect 关联，Vue 不知道需要重新渲染哪个组件。

例如：

// ❌ 错误做法：在组件外部定义
import { ref } from 'vue';
const count = ref(0);

export default {
  setup() {
    // 没有返回 count，模板无法访问；即使模板能访问（比如通过全局挂载），也不会响应更新
    return {};
  }
}

正确做法是确保响应式变量在 setup() 中定义并返回：

// ✅ 正确做法
export default {
  setup() {
    const count = ref(0);
    return { count };
  }
}

或者使用 provide/inject、状态管理库（如 Pinia）来跨组件共享响应式状态，这些方式都确保了响应式变量与组件上下文正确绑定。