基本用法介绍

Vue不同组件在进行切换时，组件会被重复销毁，重新渲染。使用包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<template><div><button @click='show = !show'>切换显示</button><MyA v-if='show'>我是A组件</MyA><MyB v-else>我是B组件</MyB></div>
</template>

根据上述代码，默认渲染A组件，不渲染B组件。点击按钮时，销毁A组件，渲染B组件。再次点击按钮时，销毁B组件，渲染A组件。

<template><div><button @click='show = !show'>切换显示</button><keep-alive><MyA v-if='show'>我是A组件</MyA><MyB v-else>我是B组件</MyB></keep-alive></div>
</template>

添加后，默认渲染A组件，不渲染B组件。点击按钮时，A组件被缓存，渲染B组件。再次单击按钮时，缓存B组件，显示A组件。可见，该方式可节省性能。如，A组件和B组件均存在大量HTTP请求，如果重复切换按钮，请求也会重复进行，对网页的性能耗费较大；但是如果使用keep-alive进行缓存，相应的请求也都只会请求一次。

可选参数

include

字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude

字符串或正则表达式。任何名称匹配的组件都不会被缓存。
include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<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 选项的键值)。匿名组件不能被匹配。

max

数字。最多可以缓存多少组件实例。

<keep-alive :max="10"><component :is="view"></component>
</keep-alive>

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

用于缓存路由组件

<keep-alive><router-view/>
</keep-alive>

如果只需要其中一个组件缓存，比如cofather组件缓存时，我们就需要keep-alive的两个属性了

<keep-alive include="cofather"><router-view/>
</keep-alive>

我们还可以利用路由中的meta属性来控制

{path: '/cofather',name: 'cofather',meta:{keepAlive:true},component: () => import('../views/Cofather.vue')},

将cofather的路由规则中的meta添加keepAlive属性为true，也就是当前路由组件要进行缓存
keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些

  <keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive" />

5min彻底搞懂vue中的keep-alive相关推荐

一文带你搞懂vue中的this.$nextTick
文章目录 1.Vue.nextTick(callback) 使用原理 2.created和mounted对比 3.例子说明 4.实际遇到的问题:vue项目中 elementUI 中表格多选框默认选中, ...
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
帮你彻底搞懂JS中的prototype.__proto__与constructor(图解) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文 ...
这一篇彻底搞懂JS中的prototype、__proto__与constructor真的很好
文章目录 1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示:不要排斥,静下心来,认真读完,你就搞懂了!(可以先看一下 ...
彻底搞懂 JS 中 this 机制
彻底搞懂 JS 中 this 机制摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...
15个示例让你搞懂Linux中的cd命令
15个示例让你搞懂Linux中的cd命令在Linux中,cd(更改目录)命令是新手和系统管理员最重要且使用最广泛的命令之一.对于没有头绪的管理员来说,cd是导航到其他目录以检查日志,执行程序/应用程 ...
java 自旋锁_搞懂Java中的自旋锁
轻松搞懂Java中的自旋锁前言在之前的文章<一文彻底搞懂面试中常问的各种"锁">中介绍了Java中的各种"锁",可能对于不是很了解这些概念的同学 ...
分分搞懂c#中的委托
分分搞懂c#中的委托: 不说废话,不来虚的概念,不管代码是否有意义,看我的优化之路,你会理解委托了: 源代码1 public class test{//我们不管代码是否有意义,我们直接看代码重构和一步 ...
一文搞懂Qt中的颜色渐变(QGradient Class)
一文搞懂Qt中的颜色渐变(QGradient Class) 1, 快速开始! Qt中与颜色渐变有关的类是QGradient 其中它又有三个子类:QLinearGradient.QRadialGradi ...
（转）帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
文章目录 1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示:不要排斥,静下心来,认真读完,你就搞懂了!(可以先看一下 ...

5min彻底搞懂vue中的keep-alive