优先在created中发起纯数据类异步请求，因其数据响应式已就绪且早于dom挂载，可缩短首屏时间、避免白屏；需操作dom时才用mounted；ssr需配合serverprefetch。
Vue 组件生命周期和异步逻辑的配合，核心在于时机对得上、清理跟得上。不是所有请求都该在 mounted 里发，也不是所有定时器都能等到 destroyed 才清——错配容易导致竞态、内存泄漏或视图不更新。
什么时候发请求：created 还是 mounted？
关键看是否依赖 DOM：
- 纯数据获取（如用户信息、配置项），不操作 DOM → 推荐 created：此时 data 已响应式，能直接赋值，且比 mounted 更早触发，利于首屏数据准备
- 需读取/操作真实 DOM（如获取元素尺寸、第三方 UI 初始化）→ 必须用 mounted：此时 this.$el 可访问，虚拟 DOM 已渲染为真实节点
- 父子组件间有数据依赖（如父组件要等子组件挂载后才发请求）→ 放在父组件的 mounted，确保子组件已完成挂载
如何避免异步结果“迟到”导致状态错乱
多个请求并发时，后发先至很常见。比如快速切换列表页，两次搜索请求返回顺序颠倒，就可能把旧数据覆盖新数据。
- 使用 AbortController 主动中止前序请求（尤其 fetch 场景）
- 在 setup 中配合 onBeforeUnmount 清理 pending 的 Promise（Vue 3 Composition API 下更推荐用
watchEffect+onInvalidate自动追踪） - 给请求加唯一标识（如路由参数、时间戳），响应回来时校验是否仍属当前有效上下文
keep-alive 场景下的生命周期特殊处理
被 <keep-alive></keep-alive> 包裹的组件不会走 beforeDestroy/destroyed，而是激活/失活切换：
- 首次进入或从缓存中重新显示 → 触发 activated：适合在此发起数据刷新（比如检查 ID 是否变化再决定是否重拉）
- 组件隐藏但未销毁 → 触发 deactivated：应清除定时器、取消未完成的请求、解绑全局事件（如 window.resize）
- 注意：created/mounted 只执行一次，后续切换不再触发，所以不能把刷新逻辑只写在这两个钩子里
资源清理不能只靠 destroyed
Vue 2 的 destroyed 或 Vue 3 的 onUnmounted 是最后防线，但很多资源其实该更早释放：
- 定时器（
setInterval）：在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中clearInterval - 事件监听（
addEventListener）：务必配对removeEventListener，否则即使组件卸载，监听器仍在内存中 - 第三方库实例（如 Map、Chart）：调用其 destroy 方法，并置空引用，帮助 GC 回收
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
