关于vue keep-alive用法的总结

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
用法1：include(包含): 字符串或正则表达式。只有匹配的组件会被缓存。
exclude（除了）: 字符串或正则表达式。任何匹配的组件都不会被缓存。

// 组件
export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

用法2：可以动态配置路由，来确定那些路由需要缓存哪些不需要缓存，这样的话就需要修改route文件下的index.js文件：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

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

2.1特殊需求：
首页是A页面
B页面跳转到A，A页面需要缓存
C页面跳转到A，A页面不需要被缓存
（例：详情跳列表，首页跳列表）

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被缓存
    }
}

2.1.1第一种写法

router.beforeEach((to, from, next) => {
  // console.log(to.path,'to...');
  // console.log(from.path,'from...');
  //判断是否需要缓存
    if(to.path == '/a' && from.path == '/b'){
      to.meta.keepAlive = true;  // 让 首页 缓存，即不刷新
      next();
    }else {
      to.meta.keepAlive = false;  // 让 列表页 即不缓存，刷新
      next();
    }
})

2.1.2第二种写法

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新（有类型的列表也可以运用缓存，返回到上一步指定的类型）
        next();
    }
};
export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
        next();
    }
};

keep-alive后的生命周期
生命周期执行顺序：
1、不使用keep-alive的情况：
beforeRouteEnter --> created --> mounted --> destroyed
2、使用keep-alive，第一次进入的情况：
beforeRouteEnter --> created --> mounted --> activated --> deactivated
3、使用keep-alive，再次进入了缓存页面的情况：
beforeRouteEnter -->activated --> deactivated

keep-alive生命周期钩子函数：activated、deactivated
使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。