一分钟了解Vue中Keep-Alive

最新推荐文章于 2025-10-29 18:28:24 发布

原创最新推荐文章于 2025-10-29 18:28:24 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#一分钟了解Vue中Keep-Alive #keep-alive #vue

VUE 专栏收录该内容

15 篇文章

订阅专栏

定义

Keep-alive是Vue内置的一个组件，可以使呗包含的组件保留状态，或避免重复渲染。
其有两个属性：include(包含的组件缓存）与exclude（排除的组件不缓存，优先级大于include）

使用方法

<keep-alive include="include_components" exclude="exclude_components">
	<component></component>
</keep-alive>

参数解释

include – 字符串或者正则表达式，只要名称匹配的组件就会被缓存
exclude – 字符串或者正则表达式，只要名称匹配的组件就不会被缓存，优先级高于include
include和exclude的属性允许组件有条件的缓存。而且可以用“，”分割字符串、正则表达式、数组。但是使用正则或者是数组，要记得用v-bind，或者“：”

示例

<!-- 使用，分割字符串，只有组件a与b被缓存 -->
<keep-alive include="a,b">
	<component></component>
</keep-alive>
<!-- 正则表达式，需要使用v-bind或者：，符合匹配规则的都会被缓存 -->
<keep-alive include="/a|b/">
	<component></component>
</keep-alive>
<!-- 数组，需要使用v-bind或者：，只要被包含的都会被缓存 -->
<keep-alive include="['a','b']">
	<component></component>
</keep-alive>