watchEffect 必须在 setup 或生命周期钩子中使用，因其依赖 Vue 的响应式上下文（如 effect scope 和 activeEffect 栈）来追踪依赖并自动清理；脱离该上下文会报错或失效。
watchEffect 不能在 setup 之外使用——它本质是组合式 API 的响应式副作用函数，必须依赖 Vue 的响应式上下文（如组件实例、effect scope 或显式创建的 effect 域）才能工作。没有 setup、onMounted、onBeforeUnmount 等生命周期钩子提供的上下文，watchEffect 无法追踪依赖，也无法自动清理。
为什么不能脱离 setup 或生命周期调用？
watchEffect 内部依赖 activeEffect 栈和当前运行的 effect scope。Vue 在 setup 执行时自动创建一个组件级 effect scope，并将 watchEffect 注册进去；若在普通 JS 文件、工具函数或顶层作用域直接调用，既无响应式代理可读取，也无 scope 可绑定，会报错或静默失效（例如：Uncaught TypeError: Cannot read properties of undefined）。
替代方案：模拟“全局监听”行为
若目标是跨组件共享监听逻辑（比如监听 localStorage、路由变化、全局状态），应避免强行“移出 setup”，而改用以下更安全的方式：
-
封装为可复用的 Composable 函数：在
useXXX.ts中定义，内部仍用 watchEffect，但导出的是一个需在 setup 中调用的函数。例如：export function useLocalStorage(key, initialValue) {<br> const data = ref(initialValue);<br> watchEffect(() => {<br> localStorage.setItem(key, JSON.stringify(data.value));<br> });<br> return data;<br>}
在组件中：const theme = useLocalStorage('theme', 'light'); -
配合 EffectScope 管理独立副作用域：适用于插件或非组件环境（如 store 初始化、主应用入口）。
import { effectScope } from 'vue';<br>const scope = effectScope(true); // true 表示自动激活<br>scope.run(() => {<br> watchEffect(() => console.log('全局监听器已启动'));<br>});<br>// 后续可手动清理：scope.stop(); - 监听非响应式源时改用事件或发布-订阅：如监听 window.resize、WebSocket 消息、自定义事件总线，应使用原生 addEventListener 或 mitt/emitter，再在回调中触发 ref/reactive 更新，让组件内 watchEffect 自然响应。
常见误用与后果
以下写法均不可行：
- 在 .ts 工具文件顶部直接写
watchEffect(() => {...})→ 报错 “No active component instance” 或无任何反应； - 在 Pinia store 的 action 或 state 初始化块中调用 watchEffect → 不生效（store 本身不提供 effect scope）；
- 在
main.ts中对全局变量使用 watchEffect → 该变量非响应式，watchEffect 无法捕获变更。
真正需要“全局副作用管理”的场景，核心不是把 watchEffect 拿出去，而是把响应式数据和副作用逻辑组织进正确的 scope —— 组件内、Composable 内、或显式 effectScope 内。这样既保持响应式语义清晰，又便于测试和销毁。
