vue中keep-alive的理解与使用

简单的理解keep-alive是什么

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素
keepalive 音译过来就是保持活跃，所以在vue中我们可以使用keepalive来进行组件缓存

keep-alive的作用

1、 在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到 vue 的 keep-alive 技术了.
2、 在 router-view 上使用可以缓存该路由组件
3、 有两个参数 include - 字符串或正则表达，只有匹配的组件会被缓存。exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

通常的使用场景

Vue中前进刷新，后退缓存用户浏览数据
列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据
重新进入列表页面 => 获取最新的数据

详细用法

缓存动态组件：
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们（此种方式并无太大的实用意义）。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

缓存路由组件：
使用keep-alive可以将所有路径匹配到的路由组件都缓存起来，包括路由组件里面的组件，keep-alive大多数使用场景就是这种。

方式一：vue文件中
<keep-alive>
    <router-view></router-view>
</keep-alive>
 
方式二：router.js中
{
        path: '/as',
        icon: 'earth',
        title: '赠品管理',
        name: 'as',
        component: Main,
        children: [{
            path: 'a',
            title: '赠品管理',
            name: 'a',
            component: () =>
                import ('@/views/a/index.vue'),
            meta:{
                keepAlive:true
            }
        }]
    }

缓存你想要缓存的：
使用v-if通过路由元信息判断缓存哪些路由

 <keep-alive>
     <router-view v-if="$route.meta.keepAlive">
         <!--这里是会被缓存的路由-->
     </router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive">
     <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
 </router-view>
 //router配置
 new Router({
   routes: [
     {
       path: '/',
       name: 'home',
       component: Home,
       meta: {
         keepAlive: true // 需要被缓存
       }
     },
     {
       path: '/edit',
       name: 'edit',
       component: Edit,
       meta: {
         keepAlive: false // 不需要被缓存
       }
     }
   ]
 });

缓存组件

    <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive>

生命周期钩子：
注意一点：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

  事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中， activated 中的不管是否需要缓存多会执行。

实例演示：

created() {
    console.log(`我是第一个created`);
},
mounted(){
    console.log(`我是第二个mounted`);
},
activated(){
    console.log(`我是第三个activated`);
    console.log("页面第一次进入的时候，钩子触发的顺序是created->mounted->activated",'只要渲染页面就会被调用');
},
deactivated(){
    console.log("页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated");
},

打印结果为

退出的结果为: