在 Vue 3 中，为什么不能在 setup() 函数外部直接使用 ref 定义的响应式变量？

在 Vue 3 中，为什么不能在 setup() 函数外部直接使用 ref 定义的响应式变量？

回答：
因为在 Vue 3 的 Composition API 中，ref 创建的响应式变量依赖于当前活跃的组件实例上下文（即“当前 effect scope”）。setup() 函数是在组件实例创建时执行的，此时 Vue 已经建立了响应式系统的上下文环境。如果在 setup() 外部（例如模块顶层）直接使用 ref，虽然语法上不会报错，但该 ref 将无法与任何组件实例关联，从而失去响应性更新的能力——它只是一个普通的响应式对象，不会触发模板或组件的重新渲染。

解析：
Vue 的响应式系统基于“副作用（effect）”追踪机制。当在 setup() 中访问一个 ref 的值时，Vue 会自动将其收集到当前组件的依赖中。一旦该 ref 的值发生变化，就会触发组件的更新。然而，在 setup() 外部创建的 ref 没有处于任何组件的 effect scope 中，因此即使其值改变，也不会通知任何视图更新。

例如：

// ❌ 错误用法：在 setup 外部定义 ref
import { ref } from 'vue';

const globalCount = ref(0); // 此 ref 不属于任何组件

export default {
  setup() {
    // 即使在这里返回 globalCount，它也无法触发组件更新
    return { globalCount };
  }
}

正确的做法是在 setup() 内部定义响应式状态：

// ✅ 正确用法
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 在 setup 中创建，具备完整响应性
    return { count };
  }
}

例外情况：如果你使用的是 <script setup> 语法糖，顶层的 ref 会被编译器自动包裹在 setup 上下文中，因此是有效的。但在普通 JavaScript 模块顶层直接使用 ref 仍不具备组件级响应性。