vue中keep-alive

Keeplive组件介绍

    ⑴．为什么要使用keep-alive

            在vue中，我们使用component内置组件或者vue-router切换视图的时候，由于vue会主动卸载不使用的组件，所以我们不能保存组件之前的状态，而我们经常能遇到需要保存之前状态的需求，例如：搜索页（保存搜索记录），列表页（保存之前的浏览记录）等等。

    ⑵．keep-alive的作用

            Keep-alive是一个vue的内置组件，它能将不活动的组件保存下来，而不是直接销毁，当我们再次访问这个组件的时候，会先从keep-alive中存储的组件中寻找，如果有缓存的话，直接渲染之前缓存的，如果没有的话，再加载对应的组件。

            作为抽象组件，keep-alive是不会直接渲染在DOM中的。

    ⑶．Keep-alive的属性

        Keep-alive提供了三种可选属性

        Include-字符串或数组或正则表达式。只有名称匹配的组件被缓存。

        Exclude -字符串或数组或正则表达式。名称匹配的组件不会被缓存。

        Max -数字类型。表示最多可以缓存多少组件实例。

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

 include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

也可以通过路由表中的mate属性 配置哪些需要缓存

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello,

      meta: {

        keepAlive: false // 不需要缓存

      }

    },
]
})

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

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

    ⑷．对于keep-alive需要知道的事情

        Keep-alive提供了两个生命钩子，分别是activated与 deactivated。

        1.初次进入时：created > mounted > activated；退出后触发 deactivated
        2.再次进入：会触发 activated；

        因为Keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

        注意如果是动态路由使用　keep-alive 需要给　router-view 设置key值

        动态路由大多是使用一个组件 只是数据不同 所以key值 直接设置自己的路由信息即可

<keep-alive>
  <router-view :key="$route.fullPath"></router-view>
</keep-alive>