effectscope 是 vue 3.2+ 的副作用容器，用于统一管理 watch、computed 等响应式操作的生命周期，避免手动清理导致的内存泄漏；它通过 scope.run() 自动捕获副作用，调用 scope.stop() 一键清理，并支持嵌套与独立模式，可脱离组件在任意 js 环境中复用。
不需要手动解绑。
reactive 创建的响应式对象本身由 Vue 的响应式系统自动管理。组件销毁时，Vue 会通过其内部的 EffectScope 机制，自动清理该组件内所有由 watch、computed、watchEffect 等创建的 effect，包括对 reactive 对象的依赖追踪。只要这些响应式对象只在组件内部使用（比如定义在 setup() 中、未被外部变量捕获），就不会造成内存泄漏，也无需你手动“解绑”。
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
但要注意一个关键前提：
不能让 reactive 变量被组件外部的长期存活对象意外持有，否则它会被“锁住”，导致整个组件实例无法被垃圾回收。
常见导致需要“手动干预”的情况包括：
定时器中直接引用了 reactive 数据
比如setInterval(() => console.log(state.count), 1000)—— 这个闭包会让state一直被 timer 持有。
✅ 正确做法：在onBeforeUnmount中调用clearInterval(id)。全局事件监听器的回调里用了 reactive 变量
比如window.addEventListener('resize', () => doSomething(state))—— 监听器没移除，state就一直活在闭包里。
✅ 正确做法：用onBeforeUnmount配合removeEventListener，或使用AbortController.signal。把 reactive 对象存进了全局 Map / Set / 数组，或传给了第三方库且未销毁
比如myGlobalCache.set('user', userState)或chart.setData(userState)后没调用chart.destroy()。
✅ 正确做法：组件卸载前从全局结构中删除、或显式调用库的销毁方法。在 setup 外部或组合式函数中创建了 watch，并脱离了组件 scope
比如在setTimeout或onMounted之外直接调用watch(...)，这个 watch 不会自动停止。
✅ 正确做法：确保 watch 在组件上下文中创建；必要时保存unwatch函数并在onBeforeUnmount调用。
本质上，Vue 不要求你“解绑 reactive”，而是要求你“别把它塞进不该去的地方”。
只要 reactive 变量始终处于组件的响应式作用域内，它的生命周期就和组件一致，自动收尾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
