在前端开发的江湖里Vue.js 凭借其简洁和灵活占据了半壁江山。但说实话，hen多初学者——甚至是一些有经验的开发者，在面对“组件状态保持”这个问题时还是会时不时地感到头疼。你有没有遇到过这种情况：辛辛苦苦填了一堆表单，或者滚动到了列表的底部，手一抖切了个标签页，再切回来时世界清零了？那种崩溃感，简直不想回忆。

这时候，keep-alive 就像那个救你于水火之中的英雄，闪亮登场。但是这位英雄脾气有点怪，你得懂它的规矩，特别是它和 Vue 生命周期钩子纠缠不清的那些事儿。今天咱们就抛开那些枯燥的官方文档翻译，用Zui接地气的方式，聊聊 Vue 生命周期与 keep-alive 到底该如何“联姻”。

一、 先搞懂：生命周期到底是个啥？

“生命周期”这个词，听起来挺玄乎，像是某种生物学或者哲学的概念。其实在 Vue 的世界里它没那么复杂。你Ke以把它想象成一个组件的“人生剧本”。

每个组件实例，从它被创建，到被挂载到页面上，再到数据geng新，Zui后被销毁，这整个过程就是它的生命周期。Vue 在这个过程的每一个关键节点，dou给你留了一个“后门”，也就是钩子函数。你Ke以在这些函数里写代码，告诉 Vue：“嘿，到了这个阶段，麻烦帮我Zuo这件事。”

但是这里有个误区。hen多人以为生命周期是“整个应用”统一跑一遍的流程。其实不是它是每个组件实例自己的阶段变化。就像每个人dou有自己的人生轨迹，组件也是独立的个体。

那些Zui熟悉的“老朋友”

在引入 keep-alive 之前，我们先回顾一下Zui常用的几个老牌钩子，这有助于我们理解后面的变化。

1. created —— 大脑Yi成型，身体还没长好

在这个阶段，组件实例Yi经在内存中诞生了数据观测和事件配置dou完成了。但是页面上的 DOM 还没渲染出来你此时去操作 this.$refs 是摸不到任何东西的。

适合Zuo什么？

发起不依赖 DOM 的 Ajax 请求，初始化数据。

初始化一些变量。

created {
    // 这时候虽然kan不见页面但数据Yi经准备好了
    this.fetchInitialData;
}

2. mounted —— 身体长成，Ke以出门了

这是Zui常用的阶段。此时DOM Yi经挂载完成，你Ke以通过 this.$el 或 this.$refs 拿到真实的页面元素了。

适合Zuo什么？

操作 DOM，比如使用 jQuery 插件。

绑定滚动事件、键盘事件。

初始化第三方库，比如 ECharts 图表、视频播放器，或者建立 WebSocket 连接。

mounted {
    // 页面Yi经渲染出来了DOM 摸得到了
    this.initChart;
    this.$refs.myInput.focus;
}

3. beforeDestroy / destroyed —— 临终遗言

当组件即将被销毁时触发。这是你Zuo“善后工作”的Zui后机会。

适合Zuo什么？

清除定时器，否则内存泄漏会找上门。

解绑全局事件监听。

关闭 WebSocket 连接。

beforeDestroy {
    // 组件要挂了赶紧清理现场
    clearInterval;
    this.websocket.close;
}

二、 keep-alive：时间的魔法

好了热身结束。现在主角登场。keep-alive 是 Vue 内置的一个抽象组件，它自己不会渲染成一个 DOM 标签，也不会出现在组件的父组件链中。它的作用只有一个：缓存。

默认情况下你在路由里切来切去，离开的组件会被直接销毁，再回来时就是重新创建。这就像你每次离开房间dou把房间拆了下次回来还得重新盖。

而 keep-alive 的存在改变了这个规则。被它包裹的组件，在离开时不会被销毁，而是被“冷冻”起来保存在内存里。当你 回来时Vue 会直接把这个“解冻”的组件拿给你用，而不是重新造一个。

这听起来hen棒对吧？但这直接导致了生命周期的行为发生了巨大的变化。Ru果不理解这一点，你的代码逻辑就会乱套。

三、 生命周期的变奏曲：activated 与 deactivated

因为组件不再被销毁，原来的 beforeDestroy 和 destroyed 在切换时就不会触发了。那我们怎么知道组件什么时候“走了”，什么时候又“回来了”呢？

Vue 专门为 keep-alive 组件新增了两个生命周期activated 和 deactivated。

1. activated —— 唤醒时刻

当组件被 keep-alive 缓存后每次组件被激活时dou会触发这个钩子。

重点来了： 第一次进入页面时created 和 mounted 还是会照常执行的。但是！当你离开后再回来created 和 mounted 绝对不会 再执行了。取而代之的，是直接执行 activated。

这就是为什么hen多新手会踩坑：他们在 created 里写了获取列表数据的逻辑，结果发现第二次进入页面时数据根本没刷新。因为组件根本没重新创建啊！

典型用法：

// src/components/.../ConversationList/index.vue
activated {
    // 每次"回到页面"时刷新数据
    // 因为 created 只在第一次进的时候跑，后续的刷新全靠这里
    this.handleGetWechatStudentList;
}

2. deactivated —— 冻眠时刻

当组件在 keep-alive 缓存下失活时触发。

这个钩子非常适合用来Zuo一些“暂停”类的操作。既然组件还在只是kan不见了那后台跑着的一些耗性Neng的东西就Ke以先停一停。

典型用法：

// src/components/.../MessageWindow/index.vue
deactivated {
    // 离开页面时暂停音频，别让声音还在后台响
    this.handlePauseAudio;
    // 或者停止轮询
    this.stopPolling;
}

四、 实战中的逻辑重构

理解了这些钩子，我们在写代码时就要有意识地拆分逻辑。咱们来kan几个具体的场景，感受一下这种变化。

场景一：列表页需要“每次回来dou刷新”

假设你有一个微信学生列表页。你希望每次切到这个页面douNengkan到Zui新的消息。Ru果不加 keep-alive，每次切回来dou重新加载，那是自然的。但Ru果你用了 keep-alive 想保持滚动条位置，那数据怎么刷新？

这时候，created 就不够用了。你得把数据请求的逻辑挪到 activated 里去，或者两者结合。

created  → 第一次初始化
activated → 每次"回来"时刷新数据

这是 keep-alive 场景下非常经典的写法。你Ke以把 created 理解为“初始化配置”，把 activated 理解为“日常geng新”。

场景二：详情页的“缓存”与“不缓存”之争

有时候，我们希望列表页缓存，但详情页不缓存。因为详情页每次进去的 ID 可Neng不一样，Ru果缓存了你点进 ID=1 的详情，再点 ID=2，页面可Neng还是 ID=1 的内容。

这时候，通常有两种策略：

动态路由配合 watch 监听路由变化，在 watch 里重新请求数据。

在 activated 里判断： 虽然组件复用了但 activated 会触发。你Ke以在这里判断当前路由参数是否变化，从而决定是否刷新。

当然geng粗暴一点的方法是在路由配置里给不需要缓存的页面加个 meta: { keepAlive: false }，然后在 App.vue 里根据这个字段动态决定是否包裹 keep-alive。

场景三：WebSocket 与 全局状态

Ru果在 mounted 里初始化了 WebSocket，那么在 deactivated 的时候，你未必需要断开连接，但在 beforeDestroy就必须断开。

这里就要小心了。有了 keep-alive，离开页面不一定触发 beforeDestroy。所以你的清理逻辑要分两块：

deactivated处理“暂时离开”的逻辑。

beforeDestroy处理“彻底再见”的逻辑。

五、 那个特殊的“根实例”

顺便提一句，我们在 src/main.js 里经常kan到这样的代码：

// src/main.js
new Vue({
  router,
  store,
  render: h => h,
  created {
    // 这里的 created 只在"整个应用开机"时执行一次
    store.commit;        // 重置业务状态
    store.commit; // 重置 IM 全屏状态
    store.commit;                  // 注入动态菜单
  },
}).$mount;

这里的 created 是根实例的生命周期，属于“整个应用开机初始化”，不属于任何页面。它和组件里的 created 不是一个概念，别搞混了。它只在你刷新浏览器或者第一次打开网页时跑一次之后不管你怎么切路由，它dou不会再跑了。

六、 ：一张图kan懂流程

文字说了这么多，不如直接kan流程来得直观。咱们把 keep-alive 加入后的生命周期跑一遍，你就全明白了。

首次进入缓存页：

created → mounted → activated

离开缓存页：

deactivated

进入缓存页：

activated  ← 直接从这里开始，跳过了 created 和 mounted！

这就是为什么你会在缓存相关的组件里经常kan到 activated 而不是 created。因为这个组件被缓存了切走页面时不是真正销毁，不会触发 beforeDestroy；回来时也不是真正创建，不会触发 created。

七、 写在Zui后

Vue 的生命周期其实并不难，难的是适应 keep-alive 带来的这种“状态保持”的思维转变。以前我们习惯于“销毁-重建”的简单粗暴，现在要学会“冷冻-解冻”的细腻操作。

当你下次再遇到“为什么我的数据没geng新？”或者“为什么我的音乐还在响？”这种问题时别急着挠头。先想想，你的组件是不是被 keep-alive 缓存了？Ru果是那你应该去 activated 和 deactivated 里找答案，而不是死盯着 created 和 mounted 发呆。

希望这篇文章Neng帮你把这些概念真正“落地”到项目里。毕竟代码写出来是给人kan的，顺便给机器跑。理解了背后的逻辑，无论 Vue 怎么升级，你douNeng游刃有余。

下一篇预告：Vue、SPA、MPA 傻傻分不清？一篇弄清楚三者的关系。

---