标签:缓存 匹配 渲染 alive keep include 组件 列表 作用
keep-alive:
主要用于保留组件状态
或避免重新渲染
。
比如: 有一个列表页面
和一个 详情页面
,那么用户就会经常执行打开详情=>返回列表=>打开详情
这样的话 列表 和 详情 都是一个频率很高
的页面,那么就可以对列表组件
使用<keep-alive></keep-alive>
进行缓存,这样用户每次返回列表
的时候,都能从缓存中快速渲染
,而不是重新渲染
。
1、属性:
-
include:
字符串或正则表达式。只有匹配的组件会被缓存。 -
exclude:
字符串或正则表达式。任何匹配的组件都不会被缓存。
2、用法:
包裹动态组件
时,会缓存
不活动的组件实例,而不是销毁
它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
<!-- 基本 -->
<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>
注意:
<keep-alive>
是用在其一个直属的子组件
被开关的情形。如果你在其中有 v-for
则不会工作。如果有上述的多个条件性的子元素
,<keep-alive>
要求同时只有一个
子元素被渲染。
3、include 和 exclude 属性的使用:
include
和 exclude
属性允许组件有条件地缓存。二者都可以用逗号
分隔字符串、正则表达式
或一个数组
来表示:
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项
,如果 name 选项不可用,则匹配它的局部注册名称
(父组件 components 选项的键值)。匿名组件不能被匹配。
标签:缓存,匹配,渲染,alive,keep,include,组件,列表,作用 来源: https://www.cnblogs.com/lvqiupingboke-2019/p/13100433.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。