Vue生命周期与keep-alive实战理解

diff 体验AI代码助手 代码解读复制代码✅ 适合做什么：
- 发起不依赖 DOM 的数据请求
- 初始化变量
- 读取 Vuex / props

diff 体验AI代码助手 代码解读复制代码✅ 适合做什么：
- 操作 $refs（真实 DOM）
- 绑定滚动、键盘、resize 事件
- 初始化第三方 JS 库（图表、播放器、WebSocket 等）

diff 体验AI代码助手 代码解读复制代码✅ 适合做什么：
- 清除定时器
- 解绑事件监听
- 关闭 WebSocket
- 释放资源

diff 体验AI代码助手 代码解读复制代码✅ 适合做什么：
- 每次回到这个页面时，重新拉数据
- 恢复某些需要刷新的状态

diff 体验AI代码助手 代码解读复制代码✅ 适合做什么：
- 暂停正在播放的音频
- 停止轮询
- 暂停实时监听

 体验AI代码助手 代码解读复制代码首次进入缓存页：
  created → mounted → activated

离开缓存页（不销毁）：
  deactivated

再次进入缓存页：
  activated  ← 直接从这里开始，跳过了 created 和 mounted！

js 体验AI代码助手 代码解读复制代码// src/main.js
new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    // 这里的 created 只在"整个应用开机"时执行一次
    store.commit('businessCoulmn/setWorkDetail', '');        // 重置业务状态
    store.commit('instantMessaging/setScreenfullBut', false); // 重置 IM 全屏状态
    store.commit('siteBar/addMenu', router);                  // 注入动态菜单
  },
}).$mount('#app');

markdown 体验AI代码助手 代码解读复制代码created：
  - 清空本地存储
  - 重置菜单和 tab
  - 清空 token

mounted：
  - 启动背景动画效果

markdown 体验AI代码助手 代码解读复制代码created：
  1. 拿老师的聊天账号
  2. 拿 IM 配置
  3. 初始化 TIM SDK
  4. 绑定 TIM 事件
  5. 登录 IM

markdown 体验AI代码助手 代码解读复制代码mounted：
  - 初始化 WebSocket 连接

beforeDestroy：
  - 关闭 WebSocket
  - 停掉轮询

js 体验AI代码助手 代码解读复制代码// src/components/.../ConversationList/index.vue
activated() {
  this.handleGetWechatStudentList(); // 每次"回到页面"时刷新数据
}

arduino 体验AI代码助手 代码解读复制代码created  → 第一次初始化
activated → 每次"回来"时刷新数据

js 体验AI代码助手 代码解读复制代码// src/components/.../MessageWindow/index.vue
deactivated() {
  this.handlePauseAudio(); // 离开页面时暂停音频
}

markdown 体验AI代码助手 代码解读复制代码1. 用户打开项目
   └─ main.js 创建根实例
   └─ 根实例 created 执行（初始化菜单、重置 IM 状态）

2. 用户登录
   └─ login.vue created 清空旧数据
   └─ login.vue mounted 显示背景动画

3. 进入 IM 聊天页
   └─ instant-messaging/index.vue created 做 IM 初始化
   └─ Layout/index.vue mounted 初始化 WebSocket

4. 用户切走页面
   └─ 缓存页面 → 触发 deactivated（不销毁）
   └─ 非缓存页面 → 触发 beforeDestroy（销毁）

5. 用户切回 IM 页面
   └─ 触发 activated
   └─ ConversationList 重新拉数据

arduino 体验AI代码助手 代码解读复制代码Vue 生命周期不是"整个项目统一跑一遍的流程"
而是"每个组件实例自己的阶段变化"

keep-alive 改变的是"离开"和"回来"的行为：
  - 离开时不销毁 → deactivated
  - 回来时不重建 → activated

所以：
  created / mounted    → 用于首次初始化
  activated            → 用于每次回来时刷新
  deactivated          → 用于离开时收尾
  beforeDestroy        → 用于真正销毁时清理