vue之keep-alive的使用，实现页面缓存

vue之keep-alive的使用，实现页面缓存

什么是keep-alive

​ 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染。

应用场景

如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验：

• 项目中的地图加载需要一定的时间，有了缓存之后可以提高用户体验。

keep-alive的生命周期

• 初次进入时：
  1. created > mounted > activated
  2. 退出后触发 deactivated
• 再次进入：
  1. 只会触发 activated
• 事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

接下来让我们来结合router缓存部分页面

在app.vue中设置

<template>
  <div id="app">
    <!-- 这里是跟组件 -->
        <!-- 加上缓存 -->
        <keep-alive>
            <router-view v-if="this.$route.meta.keep"></router-view>
        </keep-alive>
        <router-view v-if="!this.$route.meta.keep"></router-view>
  </div>
</template>

在router中增加配置meta
router中配置keep，需要缓存为ture，不需要为false

{
    path: '/shop_detail',
    name: 'shop_detail',
    component: shop_detail,
        meta:{
            keep:true  // keep(可随意命名) true 表示页面需要缓存
        }
},
{
     path: '/details',
     name: 'details',
     component: details,
         meta:{
            keep:false // keep(可随意命名) false 表示页面不需要缓存
    }
},