vue3学习（九）--- keep-alive缓存组件

最新推荐文章于 2025-05-21 13:57:33 发布

邱先生~

最新推荐文章于 2025-05-21 13:57:33 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签：学习缓存

本文链接：https://blog.youkuaiyun.com/weixin_43932245/article/details/133887593

vue3 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了Vue.js中的keep-alive组件如何用于缓存组件以提高性能，涉及其特有的activated和deactivated生命周期，以及include、exclude和max属性的使用方法。

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

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

keep-alive有两个独有的生命周期：activated、 deactivated

接下来看一下keep-alive的执行顺序：

首次进入页面触发：onMounted、onActivated
退出或切换组件触发：onDeactivated，不会触发onUnmounted
再次进入触发：只会触发 onActivated
事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

注意：keep-alive里面只允许存放一个组件

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
 
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

include、exclude和max

 <keep-alive :include="['A','B']" :exclude="" :max=""></keep-alive>

include(包含) 和 exclude(不包含) 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

max表示最多缓存的个数，超过这个限制会将之前失活的组件替换为最新的组件缓存起来。