keep-alive

Aurora_Nil

于 2021-04-18 21:21:08 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Aurora_Nil/article/details/115839952

本文详细介绍了Vue.js中keep-alive组件的功能与用法。keep-alive作为一个抽象组件，可以缓存不活动的动态组件实例，避免频繁创建与销毁带来的性能损耗。文章还解释了如何通过include、exclude和max属性来精细化控制缓存行为。

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

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态。

keep-alive用法

//在动态组件中的应用
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>

//在vue-router中的应用
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <router-view></router-view>
</keep-alive>

include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。