vue组件副作用需严格匹配生命周期：dom操作须在mounted，异步请求据需选created或mounted并清理pending请求，定时器/事件监听应在mounted启动、onbeforeunmount清理，keep-alive场景用activated/deactivated。

Vue 组件生命周期与副作用的同步，关键在于把不同性质的副作用，放到它真正该执行的生命周期阶段。不是所有逻辑都适合写在 mounted 里，也不是所有清理工作都能拖到 unmounted 才做——错配会导致重复请求、内存泄漏、DOM 操作失败或竞态问题。

哪些副作用必须同步执行？
同步副作用是指那些依赖当前状态立即生效、且不涉及等待的操作，比如：

• 修改响应式数据（触发视图更新）
• 同步更新计算属性或侦听器内部状态
• 初始化非异步的本地变量或缓存结构
  这类操作通常发生在 setup、created 或 beforeMount 阶段，它们本身就在主线程同步执行，无需额外控制。

哪些副作用需要严格匹配生命周期阶段？
这才是实际开发中最容易出错的地方。常见类型和对应阶段如下：

• DOM 操作类副作用
  必须等到组件真实挂载后才能安全访问 $el 或调用 querySelector：
  ✅ 推荐在 onMounted（组合式）或 mounted（选项式）中执行
  ❌ 不要在 created 或 setup 中尝试获取 DOM 元素

• 异步请求类副作用
  如接口调用、动态导入等，适合放在 created 或 onMounted，但要注意：

  • 若数据仅用于初始化展示，created 更早、更轻量
  • 若依赖 DOM 尺寸或第三方库（如图表渲染），必须等 mounted
  • 使用 async/await 时，务必配合 onBeforeUnmount 清理 pending 请求（例如取消 axios 的 CancelToken）

• 定时器与事件监听类副作用
  属于典型的“需要手动清理”的副作用：
  ✅ 在 onMounted 中启动 setInterval 或 addEventListener
  ✅ 在 onBeforeUnmount 中清除，避免组件卸载后继续执行
  ⚠️ 不要等到 onUnmounted 才清理——那时实例已不可用，无法调用 clearInterval 或 removeEventListener

• keep-alive 缓存组件的副作用
  当组件被缓存而非销毁时，activated / deactivated 替代了常规的挂载/卸载逻辑：
  ✅ 页面切换回来需刷新数据 → 放在 activated
  ✅ 暂停轮询或暂停视频播放 → 放在 deactivated
  ❌ 不能依赖 mounted / unmounted，它们在缓存场景下只触发一次

如何避免副作用执行时机混乱？

Vue-router参考手册

Vue-router参考手册下载

下载

• 不在 updated 中修改响应式数据（会触发新一轮更新，导致死循环）
• 避免在 beforeUpdate 中做耗时同步操作，可能阻塞渲染
• 使用 nextTick 包裹对更新后 DOM 的读取操作，确保 DOM 已完成重绘
• 对副作用做显式标记或封装（例如 useInterval、useApi 等组合式函数），让生命周期归属一目了然

不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！