keep-alive

一、keep-alive是什么

keep-alive作为双标签使用，当包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们。
和transition相似，keep-alive是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。

1、keep-alive属性

1. include 只有名称匹配的组件会被缓存
2. exclude 任何名称匹配的组件都不会被缓存
3. max -数字 最多可以缓存多少组件实例

如果不使用属性，则会默认缓存所有组件实例
include和exclude的值为路由规则中的name值

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      // 路由名字
      component: () => import ("@/views/Home.vue")
      // 路由懒加载
    }
 });

注意：缓存的组件生命周期会发生改变，创建阶段和销毁阶段的生命周期只会执行一次。

二、钩子函数

被keep-alive缓存的组件会多出来2个钩子函数，activated 和deactivated。跟data和methods同级。

activated 当显示缓存组件时触发
deactivated 当隐藏缓存组件时触发

<template>
  <div id="app">
    <!--	  exclude后边跟组件的名字意思就是所除了Detail组件不会被缓存其他都会被缓存-->
    <!--	  exclude="Detail"-->
      <keep-alive exclude="Detail">
        <router-view class="Router" />
      </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods:{
  },
  activated(){},
  // 实例显示
  deactivated(){}
  // 实例隐藏
};
</script>