keep alive

Posted 郭郭郭牧鑫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了keep alive相关的知识,希望对你有一定的参考价值。

keep alive的概念

是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

基本用法,缓存整个页面或组件

<keep-alive>
    <component>
      <!-- 组件将被缓存 -->
    </component>
</keep-alive>

有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下

<keep-alive>
    <router-view></router-view>
</keep-alive>

结合router,缓存部分页面

使用$route.meta的keepAlive属性:

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

router设置

... 
routes: [
  { path: '/', redirect: '/index',  component: Index, mate: { keepAlive: true }},
  {
    path: '/common',
    component: TestParent,
    children: [
      { path: '/test2', component: Test2, mate: { keepAlive: true } } 
    ]
  }
  ....
  // 表示index和test2都使用keep-alive

使用新增属性inlcude/exclude

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

需要在router中设置router的元信息meta:


```javascript
//...router.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 的生命周期函数

1.activated:页面第一次进入的时候,钩子触发的顺序是created->mounted->activated
2.deactivated :页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated

以上是关于keep alive的主要内容,如果未能解决你的问题,请参考以下文章

vue.js 源代码学习笔记 ----- keep-alives

keep-alive组件缓存

前端框架vue中的keep-alive总结实践

在React中实现和Vue一样舒适的keep-alive

Vue keep-alive防止重复渲染DOM总结

利用Vue中keep-alive,快速实现页面缓存