Keep-Alive的详解

关于Keep-Alive：

顾名思义：保持活力、持久连接

• 官网上是这么说的：<keep-alive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

• 默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例，也就是说在组件切回来之后，之前已更改的状态都被重置了。

• 当一个组件被包裹在keep-alive组件内部时，它将会被缓存起来，而不是被销毁。这样，在组件切换时，可以直接从缓存中获取已经渲染过的组件，而不需要重新创建和渲染。

• 使用keep-alive组件可以提高应用的性能，特别是在有大量动态组件切换的场景下。它可以避免不必要的组件销毁和重新创建，减少了组件的渲染时间和资源消耗。

页面内容：

    //One页面
    <el-checkbox v-model="checked">One页面</el-checkbox>
    
    //Two页面
    <el-input  v-model="input" placeholder="请输入内容"></el-input>

1、在没有使用keep-alive的时候：

    <template>
      <div id="app">
        <nav>
          <router-link to="/one">One</router-link> |
          <router-link to="/two">Two</router-link>
        </nav>
        <router-view/>
      </div>
    </template>

在没有使用keep-alive包裹住router-view视图组件的时候，One页面修改复选框状态或者在Two页面input框内添加内容，当点击上方One路由或者Two路由再切换回另一个路由的时候，之前已更改的状态都被重置了，也就是说页面上显示的还是初始时的内容

2、在使用keep-alive的时候：

    <template>
      <div id="app">
        <nav>
          <router-link to="/one">One</router-link> |
          <router-link to="/two">Two</router-link>
        </nav>
        <keep-alive>
          <router-view/>
        </keep-alive>
      </div>
    </template>

在使用keep-alive包裹以后，我们发现两个页面勾选、输入的内容，在路由来回切换的时候，就不会丢失了，这就是使用keep-alive保存了之前的组件状态，页面上显示的时缓存之后状态。

直接加上keep-alive的话，会把所有的router-view层级下的视图的组件都缓存了。不过有的时候，我们只想缓存部分，不想缓存所有的，那这怎么办呢？keep-alive中的include、exclude属性也就出来了

1. include：string | RegExp | Array 指定要缓存的组件名称或匹配的正则表达式。只有匹配的组件才会被缓存。
2. exclude：string | RegExp | Array 指定不需要缓存的组件名称或匹配的正则表达式。匹配的组件不会被缓存。
3. max：number | string指定最大缓存的组件实例数量。当缓存的组件实例数量超过该值时，最早缓存的实例会被销毁。
4. include和exclude属性可以同时使用，但是exclude的优先级更高。

    // 指定one组件被缓存 
    <keep-alive include="one">
      <router-view/>
    </keep-alive>

    // 指定one组件不需要被缓存
    <keep-alive exclude="one">
      <router-view/>
    </keep-alive>

keep-alive还有一个属性就是max属性，这个max一般情况用的不是太多，主要目的就是控制一下被缓存的组件的个数，后缓存的就会把先缓存的给挤掉线了，也是相当于缓存优化的一中策略了。

有关keep-alive的生命周期：

使用了keep-alive的组件以后，组件上就会自动加上了activated钩子和deactivated钩子
两个生命周期钩子函数可以在被包裹的组件中使用，以便在组件被激活或停用时执行相应的逻辑

• activated 在被包裹的组件被激活时调用 可以简单理解为进入这个页面的时候触发
• deactivated 在被包裹的组件被停用时调用 可以简单理解为离开这个页面的时候触发

当组件被激活或停用时，对应的生命周期钩子函数会被触发，并在控制台中输出相应的信息

    <script>
        export default {
          name: "one",
          data() {
            return {
              checked: false,
            };
          },
          activated() {
            console.log("我是activated钩子");
          },
          deactivated() {
            console.log("我是deactivated钩子");
          },
          created() {
            console.log("我是created钩子");
          },
          mounted() {
            console.log("我是mounted钩子");
          },
          beforeDestroy() {
            console.log("我是beforeDestroy钩子");
          },
        };
    </script>

初始进入和离开 created ---> mounted ---> activated --> deactivated

后续进入和离开 activated --> deactivated