keep-alive的作⽤
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 选项的键值)。匿名组件不能被匹配。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。