Vue 中的“副作用”指执行后对外部状态产生可观察影响的代码，如修改 DOM、发起请求等；effect() 是其驱动单元，自动追踪依赖并响应更新，需配合 watch、onBeforeUnmount 等机制合理管理。
Vue 响应式系统里的“副作用”，指的是一段执行后会对外部状态产生可观察影响的代码，它不只返回值，还会改变程序运行环境。
副作用是能被“看见”的外部变化
比如修改 DOM、更改全局变量、发起网络请求、写入 localStorage、触发事件——这些操作的结果能在函数之外被检测到。一个典型例子：
- document.body.innerHTML = '加载完成' → 页面内容变了，其他代码能读到新 HTML
- localStorage.setItem('token', 'abc123') → 浏览器本地存储被改写，下次刷新仍存在
- fetch('/api/save', { method: 'POST' }) → 向服务器发了请求，后端状态可能已更新
副作用函数（effect）是响应式系统的驱动单元
在 Vue 3 中，effect() 就是用来定义副作用的函数。它有两个关键行为：
- 执行时自动追踪它访问过的响应式数据（如 reactive 对象的属性），把这些数据记为“依赖”
- 当任一依赖更新时，effect 会被重新调用，从而让副作用同步发生
例如：
const state = reactive({ count: 0 });
effect(() => { console.log('count 变为：', state.count); });
state.count = 5; // 控制台立刻输出新值
这里 effect 不仅打印日志，还隐含地“订阅”了 state.count —— 它就是典型的副作用函数。
副作用 ≠ bug，但需要被合理管理
副作用本身不是错误，而是必要功能（比如保存用户输入、更新 UI、上报埋点）。问题在于：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 如果副作用发生在计算属性（computed）或渲染函数中，可能导致不可预测的连锁更新
- 若没及时清理（如定时器、事件监听器），容易引发内存泄漏或重复执行
- 异步副作用（如 API 调用）需配合 watch 或 onMounted 等生命周期钩子控制时机
所以 Vue 提供 watchEffect（自动追踪）、watch（手动指定依赖）、onBeforeUnmount（清理）等机制，帮开发者把副作用“框”在可控范围内。
副作用和依赖追踪是一体两面
没有依赖追踪，副作用就无法响应数据变化；没有副作用，响应式系统也就失去了实际意义。track 记录“谁用了谁”，trigger 通知“谁该重跑”，而 effect 就是那个被通知后实际干活的函数。三者协作，才让 数据变 → 视图/逻辑自动跟上 成为可能。
