一、keep-alive是什么。

        keep-alive是vue的内置组件，是用来包裹动态组件的，它会缓存不活跃的组件，keep-alive是一个比较抽象的组件，它自己不会渲染dom节点，也不会出现在父组件链中。

二、keep-alive的功能。

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

三、keep-alive的使用方法。        1.动态组件使用:component
<template><div class="">
  <div>
      <router-link @click.native="change('alive1')" to="/alive1">alive1</router-link>
      <router-link @click.native="change('alive2')" to="/alive2">alive2</router-link>
      <router-link @click.native="change('alive3')" to="/alive3">alive3</router-link>  
  </div>
      <router-view v-if="num==0">
      </router-view>  
          <component :is="name"></component>
      
</div></template>
<script>
import alive1 from "../components/alive1"
import alive2 from "../components/alive2"
import alive3 from "../components/alive3"
export default {
data(){
return{
  name:'',
  num:1}},
methods: {
change(i){
  this.name=i}},
components:{
alive1,alive2,alive3},}
</script>

         这样就可以做到组件间的切换,这时我们组件中的数据不会进行缓存.

         页面中的情况点击视频查看

        2.keep-alive包裹后,再此因为我们没有使用黑名单(exclude)/白名单(include)这两个属性所以它会缓存我们所有的组件. 
<keep-alive>
          <component :is="name"></component>
        </keep-alive>

           这样就可以做到组件的缓存,因为我们没有设置限制,所以只有我们激活过的组件才会进行缓存

            页面中的情况点击视频查看

        3.keep-alive的属性exclude

因为我们在做某个项目的时候不希望某个页面一直重复加载加载这时就需要用到exclude(不允许某个组件缓存)这个属性也叫黑名单

<keep-alive exclude="alive1">
          <component :is="name"></component>
        </keep-alive>
            （1）.字符串设置(以逗号分隔)

                

<keep-alive exclude="alive1,alive2">
          <component :is="name"></component>
        </keep-alive>
            （2）.正则表达式
<keep-alive :exclude="/alive1|alive2/">
          <component :is="name"></component>
        </keep-alive>
            （3）.数组
<keep-alive :exclude="[alive1,alive2]">
          <component :is="name"></component>
    </keep-alive>

               *数组和正则必须使用v-bind   ‘:’

             这样就可以做到某个组件不缓存

             页面中的情况点击视频查看

        4.keep-alive的属性include

这个属性和上面的恰恰相反,这个属性意思是只允许某个组件缓存也叫白名单

<keep-alive include="alive1">
          <component :is="name"></component>
        </keep-alive>

 

          （1）.字符串设置(以逗号分隔)  
<keep-alive include="alive1,alive2">
          <component :is="name"></component>
        </keep-alive>
          （2）.正则表达式
<keep-alive :include="/alive1|alive2/">
          <component :is="name"></component>
        </keep-alive>
          （3）.数组
<keep-alive :indclude="[alive1,alive2]">
          <component :is="name"></component>
    </keep-alive>

               *数组和正则必须使用v-bind   ‘:’

             这样就可以做到某个组件不缓存

             页面中的情况点击视频查看

        5.keep-alive的属性max

这个属性传递的是number类型，意味着最多可以缓存几个组件；

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

        这样可以做到最大的缓存数量。