keep-alive的概念及作用和钩子函数

keep-alive的概念及作用，在使用keep-alive的时候，增加了哪些钩子函数？

h_h

概念

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

作用

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

Props

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

实例用法

1. include 会被缓存的组件方法

     // 路由name值为 a 的将会被缓存
    <keep-alive include='a'>
        <router-view></router-view> 
    </keep-alive>
    
    // 路由name值为 a b c 的将会被缓存(多个用‘逗号’分割)
    <keep-alive include='a,b,c'>
        <router-view></router-view>
    </keep-alive>

    // 也可以用数组
    <keep-alive include="['a', 'b']">
        <router-view></router-view>
    </keep-alive>

2. exclude 排除不需要缓存的组件

   //user组件将不会被缓存
    <keep-alive exclude="User">
       <router-view></router-view>
    </keep-alive>

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

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

钩子函数

当使用 <keep-alive> 的时候， activated 与 deactivated 这两个钩子函数生效

要点

• activated和deactivated是配合keep-alive一起使用的
• activated和deactivated没有keep-alive的时候是不会被触发的
• 在存在keep-alive的时候可以将activated当作created进行使用
• deactivated是组件销毁的时候触发，此时的destory是不执行的

    // 在router文件里面写
    {
        path: "/",
        name: "home",
        component: HomeView,
        meta: {
        // 用来判断是否路由缓存
          KeepAlive: false,
          title: "首页",
        },
      }
      
    // 写在App.vue里面  判断有就缓存，没有就不缓存
    <keep-alive>
      <router-view v-if="$route.meta.KeepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.KeepAlive" />
    
    // 在home路由里面写 进入页面缓存一下，再次进入不执行 activated
     activated() {
        console.log("activated,Home");
      },
      deactivated() {
        console.log("deactivated,Home");
      }