Vue副作用函数只响应式追踪响应式数据，不管理外部资源；其对外部资源的影响由开发者在函数内主动操作产生，需手动清理以避免内存泄漏。
Vue 的副作用函数本身不管理外部资源，它只负责“响应数据变化并执行逻辑”。对外部资源（如 DOM、网络、定时器、本地存储等）的依赖，是由开发者在副作用函数内部主动操作产生的，Vue 不介入也不追踪这些操作——它只管响应式数据的读写。
副作用函数如何产生对外部资源的影响
所谓“对外部资源的依赖”，其实是函数执行时主动发起的行为，不是 Vue 自动建立的关系。Vue 只确保：当它依赖的响应式数据更新时，这个函数会被重新调用，从而可能再次触发对资源的操作。
-
DOM 操作：比如
effect(() => { document.title = state.pageTitle })，每次state.pageTitle改变，函数重跑，document.title就被重新赋值 -
网络请求：若写成
effect(() => { fetch(`/api/user/${state.id}`) })，则state.id一变就会发新请求（注意：这通常需加防抖或条件判断，否则易滥用） -
定时器/事件监听：副作用里启动
setInterval或addEventListener，属于手动绑定；但 Vue 不会自动清理——需要你配合onStop或cleanup手动释放 -
localStorage / cookies：读写
localStorage.setItem('theme', state.theme)是副作用的一部分，但 Vue 不感知 storage 本身是否变化
Vue 不跟踪、也不保证外部资源的一致性
Vue 的依赖收集只发生在响应式数据的 get（读取）和 set（赋值）环节。它不会、也不能监控：
- 你调用的
fetch是否完成、是否失败 -
document.querySelector找到的元素是否存在、是否已被移除 - 你注册的
click事件监听器是否还在页面上 -
localStorage被其他标签页修改后，当前页是否同步
这些都属于应用层逻辑，需由你自行处理状态、错误、清理和竞态控制。
立即学习“前端免费学习笔记（深入）”；
如何安全地管理副作用中的外部资源
关键是在副作用函数中做好“初始化 + 清理”闭环，尤其在 effect 重新执行前要释放旧资源：
- 使用
onInvalidate（在watchEffect中）或effect.onStop（在effect返回对象上）注册清理函数 - 避免重复开启定时器：
let timer; onInvalidate(() => clearTimeout(timer)); timer = setTimeout(...) - 网络请求应取消上一次未完成的：
const controller = new AbortController(); fetch(..., { signal: controller.signal })，并在清理时调用controller.abort() - DOM 事件监听推荐用模板指令（如
@click）或组合式 API 的v-on绑定，它们由 Vue 自动管理生命周期
为什么不能把外部资源变成响应式依赖？
因为 Vue 的响应式系统只作用于 JavaScript 对象/数组/基本类型包装（ref），而外部资源（DOM 节点、网络连接、文件句柄等）不是可代理的数据结构。它们没有 getter/setter，也无法被 Proxy 拦截。Vue 的 track 和 trigger 机制天然无法覆盖这些边界。
所以，对外部资源的“响应”，本质是靠副作用函数的重复执行来模拟的——不是 Vue 在监听资源，而是你在用响应式数据驱动资源操作。
