缓存组件keep-alive的功能

动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换离开当前组件的时候当前的组件会被销毁，当组件再次切换回来时Vue都会重新创建一个新的组件对象。

即每次切换组件时不会保存用户的操作，而有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住用户在A的操作，不要重新创建A组件，keep-alive就可以缓存动态切换的组件。

组件的生命周期函数从创建前后开始到销毁前后除了多次更新视图时更新页面的生命周期函数会多次调用，而其他生命周期函数从组件的创建到销毁都只会调用一次。

所以下面就演示了当切换离开当前组件时销毁之前的生命周期函数就执行了，而再次切换回来的时候创建完毕的生命周期函数又再次调用了。就表示每次切换离开当前组件的时候当前的组件会被销毁，当组件再次切换回来时Vue都会重新创建一个新的组件对象。

缓存组件keep-alive的用法

使用Vue内置的keep-alive组件让其包裹动态组件的标签，就可以让包裹的组件保存在内存中不被销毁。

语法：

<keep-alive>
      <component :is="componentId"></component>
</keep-alive>
默认全部加过的组件就会缓存，所以切换组件时会保存用户的操作

案例演示

  <div id="app">
    <h1>黑暗森林</h1>
    <button @click="componentId = 'One'">One组件</button>
    <button @click="componentId = 'Two'">two组件</button>
    <button @click="componentId = 'three'">three组件</button>
    <keep-alive>
      <component :is="componentId"></component>
    </keep-alive>
  </div>

属性

属性：
- include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
- exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
- max - 数字。最多可以缓存多少组件实例。

可以使用属性来设置缓存，提供include属性决定缓存哪些组件，其余的不缓存和exclude属性决定哪些组件不缓存，其余的缓存，可以接收字符串就是组件名或正则表达式

//只缓存Box1和Box2
<keep-alive :include="/Box1|Box2/">
    <component v-bind:is="mytemp"></component>
</keep-alive>
//除了Box3不缓存，其他的都缓存
<keep-alive exclude="Box3">
    <component v-bind:is="mytemp"></component>
</keep-alive>

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

:max='2'  即缓存最近被渲染过的2个组件

keep-alive的生命周期函数

当我们组件页面的某个局部需要根据参数的配置在mounted生命周期函数去做网络请求。比如用户需要切换到其他组件设置一些参数，当用户再次切回组件时，组件中的mounted生命周期函数就不会根据用户设置的参数去发送网络请求，因为组件没有被销毁，从创建组件开始mounted生命周期函数只会调用一次。

为了解决以上业务问题就需要keep-alive的生命周期函数，当前组件一开始在mounted生命周期函数不做网络请求，而是在用户设置好参数后再次切回组件时才在mounted生命周期函数发送网络请求。

被缓存的组件不再创建和销毁，而是激活和非激活
activated - 激活
deactivated - 失去激活状态

activated钩子：在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用，第一次渲染会调用，而用户再次切回组件也会被调用，所以就可以将需要将根据参数配置的网络请求放在这个生命周期函数中。

deactivated钩子：组件离开时调用，可以在这个生命周期函数中停止一些组件当前的动画效果等。

这两个生命周期函数使用的前提是当前组件包裹在keep-alive组件中，这两个生命周期函数和组件的生命周期函数是同级的，但不是组件的生命周期函数，而是keep-alive的生命周期函数。

<template>
  <div class="one">
    <h1>One组件</h1>
    <p>自然选择号 前进四</p>
    前进四<input type="checkbox" />
  </div>
</template>

<script>
export default {
    created() {
    console.log("One组件已经创建完毕");
  },
  beforeDestroy() {
    console.log("One组件准备销毁了");
  },
  mounted() {
    console.log("发送网络请求");
  },
  activated() {
    console.log("根据参数配置发送网络请求");
  },
  deactivated() {
    console.log("组件非激活");
  },
}
</script>