快速理解keep-alive

---

一、什么是keep-alive？

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive
是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中

二、怎么使用

在组件中使用

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

当你点击组件一里面加一的时候 ， num会跟着加一
切换到组件二的时候 再返回组件一时，里面的num是你点击之后的num
如果切换之前num是3的话 ，切换之后回到组件一 的num还会是3
如果没有被keep-alive包裹的话，组件一里面的num会变回原来的值 ，也就是0
被keep-alive包裹后，数据会有缓存，页面不会渲染，当你再次打开会渲染缓存之后的值

代码如下：

    <div>
      <button @click="activeName = 'Keep1'">组件一</button>
      <button @click="activeName = 'Keep2'">组件二</button>
      <button @click="activeName = 'Keep3'">组件三</button>
    </div>
    <keep-alive>  
      <components :is="activeName"></components>
    </keep-alive>
        <!--
			activeName  是data的数据    Keep1 是组件名称
            动态组件 components 标签  要显示哪一个组件；使用 is属性   :is="引入过来的组件名"

        -->

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与
deactivated（组价离开时调用）

在页面中使用

路由元信息的写法

如果需要缓存整个项目，直接在app.vue中用keep-alive包裹router-view即可。要缓存部分页面，需要在路由地址配置中，在meta属性中添加一个状态，在app.vue中判断一下包裹的router-view即可

代码如下：

HTML

    <div>
      <router-link to="Keeps1">Keeps1</router-link> |
      <router-link to="Keeps2">Keeps2</router-link> |
      <router-link to="Keeps3">Keeps3</router-link>
    </div>
    <!-- 路由元信息的写法 -->
    <keep-alive >
      <router-view v-if="!$route.meta.noneedCache"/>
    </keep-alive>
    <router-view v-if="$route.meta.noneedCache"></router-view>

router

 {
    path: "/Keeps1",
    name: "Keeps1",
    component: function () {
      return import("../views/Keeps1.vue");
    },
    meta: {
      noneedCache: true,
    },
  },

白名单 黑名单的写法

例如有一个商品页面和一个详情页面，这样在两个页面切换的时候就可以用到keep-alive,在切换到详情的时候，把状态保留在内存中，而不是销毁,从而提高一个性能的优化

  白名单 -- 有缓存 include=""

  黑名单 -- 没有缓存  exclude="[]"
  
  最大数 --  max

    <!--
      白名单 -- 有缓存 include=""
      黑名单 -- 没有缓存  exclude="[]"
      最大数  max
    -->
   <keep-alive :exclude="[不需要缓存的页面]">
      <router-view></router-view>
    </keep-alive>

---