Vue组件中异步处理需按生命周期精准 placement：created适合纯数据请求，mounted确保DOM就绪，activated/deactivated管理keep-alive缓存，beforeUnmount及时清理资源，避免内存泄漏与视图错乱。
异步处理在 Vue 组件中不是“放哪儿都行”，关键看数据依赖、DOM 依赖和资源生命周期是否对齐。错放请求或漏清资源，轻则视图错乱，重则内存泄漏。
纯数据请求优先用 created
只要不操作 DOM，比如拉用户信息、配置项、列表初始数据，就该放在 created。此时 data 已响应式，this 可直接赋值，且比 mounted 早触发，能更快推进首屏渲染。
- 避免在 created 中访问
this.$el或调用document.getElementById—— DOM 还没生成 - 配合
async/await或 Promise 链写法更清晰，但注意错误要 try/catch，别让未捕获异常中断初始化 - SSR 场景下，服务端会执行 created，但需确保逻辑兼容（如无浏览器 API），必要时用
process.client做环境判断
涉及 DOM 操作必须等 mounted
需要测量元素尺寸、初始化第三方 UI（如 ECharts、地图 SDK）、监听窗口 resize 或 focus 元素，这些都得等真实节点挂载完成，mounted 是唯一安全时机。
- 首次挂载后才调用
this.$refs.xxx或this.$el.querySelector - 若子组件依赖父组件 DOM 布局，建议把相关逻辑放在父组件的 mounted，确保子组件已渲染完毕
- 慎用
nextTick：多数情况 mounted 已足够；仅当需确保 DOM 更新“刚完成”（比如动态插入后立即获取 offset）才额外包裹
keep-alive 下激活/失活才是刷新主战场
<keep-alive> 组件不会反复走 created/mounted，所以把请求写在这两个钩子里，切换回来时根本不会重发。真正该响应变化的地方是 activated 和 deactivated。
立即学习“前端免费学习笔记（深入）”；
- 在 activated 中检查路由参数、时间戳或状态标识，决定是否刷新数据（比如详情页 ID 变了才重拉）
- 在 deactivated 中主动取消 pending 请求（用 AbortController）、清除定时器、解绑 window 事件，防止后台运行干扰其他页面
- 不要在 activated 里无条件发请求——容易造成频繁重复拉取，加个简单防抖或标记位更稳妥
清理动作别拖到 destroyed/onUnmounted
销毁钩子是最后防线，但很多资源早就该释放了。等到组件彻底卸载才清理，可能已造成竞态或内存滞留。
- 定时器、EventSource、WebSocket 连接，在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中清除
- 全局事件监听（如
window.addEventListener）务必配对removeEventListener，否则监听器持续存在 - 第三方实例（如 Map 实例、图表对象）调用其
destroy()方法，并将引用设为null，帮助垃圾回收
不复杂但容易忽略。
