关于keep-alive的理解

最新推荐文章于 2025-06-27 23:22:00 发布

_必应

最新推荐文章于 2025-06-27 23:22:00 发布

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue

vue 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨Vue中keep-alive组件的生命周期钩子触发顺序，解析首次与再次进入页面时的不同行为。揭示了created、mounted及activated钩子在页面缓存时的执行逻辑，为开发者提供实时请求页面数据的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于keep-alive

首次进来 hook 的触发顺序 created-> mounted-> activated，退出时触发 deactivated：
// 控制台打印结果
the hook of created is done!
the hook of mounted is done!
the hook of activated is done!
the hook of deactivated is done!
二次进来 hook 只触发 activated，退出时触发 deactivated：
// 控制台打印结果
the hook of activated is done!
the hook of deactivated is done!
所以这就是为什么有些人开启 keep-alive 之后，created 和 mounted 注册的 pageInt 方法不触发的原因了，因为 keep-alive 把它们屏蔽了，也就是把数据缓存起来，所以不再请求。
如果你的某些页面一定要实时请求，你可以直接在 activated 这个 hook 做 pageInt，就不要在 created 和mounted 上面注册 pageInt 方法了。
还有你可以选择性 pageInt，比如监听状态变化，包括但不限于监听路由的变化，某参数的变化，某时间节点的变化等等。