开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

组件缓存

在vue中组件的缓存用到了keep-alive，这是vue本身所带的一种插件使用，其中keep-avlive有三个属性：

常见的两属性：include /exclude

不常见的属性：max,max属性是用来增加缓存的一个范围条件。

简单用例如下：

APP.Vue

<template>
  <div id="app">
<!--    缓存组件名称为xx的组件-->
    <keep-alive include='a,b'>
      <router-view/>
    </keep-alive>
<!--     使用正则表达式进行缓存-->
    <keep-alive :include='/a|b/'>
      <router-view/>
    </keep-alive>

<!--    绑定缓存组件-->
    <keep-alive :include='includedComponents'>
      <router-view/>
    </keep-alive>

<!--    排除某些缓存，剩下的都缓存-->
    <keep-alive exclude='a'>
      <router-view/>
    </keep-alive>

<!--    最常用的缓存方式,在路由中添加标识来判断是否走缓存的路线-->
    <keep-alive exclude='a'>
      <router-view v-if="$route.meta.keepalive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepalive"/>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

router.js

{
    path: "/a", // 组件a
    name: "a",
    meta:{
        keepalive:true
    },
    component: () =>
        import ("./views/product/BeyondContainer/index.vue")
},
{
    path: "/b", // 组件b
    name: "b",
    meta:{
        keepalive:false
    },
    component: () =>
        import ("./views/product/BeyondContainer/index.vue")
}

组件更新

场景：点击表格的某一项查看其详情，当查看详情时表格的返回数据已经更新，但是在查看详情返回时却依旧是原来的内容。

解决方法：

我们都知道vue除了本身的钩子外，keep-alvie也带了两个钩子(activated/ deactivated),所以我们在activated这个钩子中进行重新获取数据就可以了。

created() {
},
activated() {
  function  gettabledata(){
    //重新获取表格数据
  }
}

抛开keep-alive

keep-alive的好处是缓存当前的数据在一个对象当中，在页面需要重新渲染时利用旧数据进行一次渲染。这是比新生成虚拟节点是要快的。如果我们不用keep-alive也是可以实现页面的缓存记忆。

方案： 在跳转页面进行一次关键key的缓存，比如节点的id,页面的page /size等，在返回时放在路由中，在初始页面根据这些key进行传参调用。

缺点： 每个页面都要进行新的取值，添加了多余的代码，不如用keep-alive来的方便，而且更新的速度没有keep-alive快。

组件的缓存与更新

组件缓存

组件更新

抛开keep-alive