关于vue的keep-alive缓存

2020-04-24

在vue中是可以进行页面的缓存的，即非首次进入页面时会展示之前的数据，这一点是如何做到的后面深究一下，先说说术（即怎么做）。

如果要做组件的缓存，可以直接使用keep-alive包裹要缓存的组件，如下

<keep-alive>
    <component>
</keep-alive>

如果要做页面级别的缓存，可以使用vue-router在页面主入口设置用meta来标识是否需要缓存，之后在相应的router处写meta:keepAlive:true 即可

<div id="app">
    <div class="app-body">
      <div class="app-content">
        <keep-alive>     <!--使用keep-alive将页面缓存 需要设置meta里的keepAlive字段 即可缓存当前页面-->
          <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>
      </div>
    </div>
    </div>

  // router
  {
    path: '/agent/housepromote/recordGuestLook',
    name: 'recordGuestLook',
    meta: {
      title: '录入带看反馈',
      pid,
      uicode: '',
      keepAlive: true, // 需要被缓存
    },
    component: () => import('@/pages/agent/housePromote/recordGuestLook'),
  },

关于keep-alive，还有很多属性，比较常用的是include、exclude，标识要缓存哪个页面，不缓存哪个页面，后面参数是组件名（即name），也可以是正则，具体说明可以参照官网https://cn.vuejs.org/v2/api/#keep-alive

<keep-alive include="compName">
   <router-view />
</keep-alive>

还有一点需要讲的是它的生命周期

设置了keepAlive缓存的组件：

第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated

后续进入时：beforeRouterEnter ->activated->deactivated

所以我们可以在activated，deactivated生命周期做一些缓存进来的事情

原理涉及到vue的VDom，todo~