keep-alive组件是什么？

<keep-alive>组件，我称之为缓存组件，当你不希望某一个组件在每次调用时都被初始化，而保存上一次打开时的状态时可以使用该组件来做组件持久化。

怎么用?

先上最简单的案例：

app.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

一般我都在app.vue中使用可以通过keep-alive和路由守卫搭配使用做到筛选是否需要组件缓存的功能

route.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
    {
        path:"/",
        name:"home",
        component: ()=> import('@/views/home'),
        meta:{
            keepAlive:true
        }
    },
    {
        path:"*",
        name:"404",
        component: ()=> import('@/views/404'),
        meta:{
            keepAlive:true
        }
    },
    {
        path:"/article",
        name:"article",
        component: ()=> import('@/views/article'),
        meta:{
            keepAlive:true
        }
    },
    {
        path:"/detail",
        name:"detail",
        component: ()=> import('@/views/detail'),
        meta:{
            keepAlive:false
        }
    }
]

export default new Router({
    routes
})

keep-alive组件接收三个参数

可通过这三个参数筛选需要的组件

include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
,优先级大于include
max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

<keep-alive include="detail,article" exclude="detail" max="2">
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

keep-alive组件的生命周期钩子

当某组件被包含在<keep-alive>标签中时切换/关闭（非第一次打开）该组件时将不会触发该组件的生命钩子函数：created,mounted,destroyed..., 将获得两个额外的生命钩子函数：activated、deactivated

activated: 在组件创建或者被调用时触发，与原钩子优先级：created>mounted>activated
deactivated: 在组件关闭时触发

export default {
    name:"article",
    data(){
        return{

        }
    },
    created(){
        console.log("article创建完毕");
    },
    mounted(){
        console.log("article组件加载完毕");
        console.log(this.$route.meta.keepAlive);
    },
    activated(){
        console.log("keep-alive组件加载完毕钩子");
    },
    deactivated(){
        console.log("keep-alive组件退出时钩子");
    },
    beforeDestroy(){
        console.log("组件被销毁之前");
    },
    destroyed(){
        console.log("组件被销毁");
    }
}

前方巨坑，请注意！！！！

使用include/exclude时一定要在该组件内加上name属性并且与include/exclude内的名称保持一致，否者会失效

export default {
   name:"article",
   data(){
       return{

       }
   },
}

vue2.x keep-alive组件使用