vue中keepalive怎么理解？

Posted 2021-04-16 Vue中文社区

vue中keepalive怎么理解？

说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js

什么是keepalive

我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时， 也不会进行重新init

keepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存

基本使用

 
   
   
 

  
    
    
  
// 被keepalive包含的组件会被进行缓存
  
    
    
  
<keep-alive>
  
    
    
  
    <component />
  
    
    
  
</keep-alive>
 
   
   
 

上面提到被keepalive包含的组件不会被再次init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hook

• activated 当keepalive包含的组件再次渲染的时候触发

• deactivated 当keepalive包含的组件销毁的时候触发

注: 2.1.0 版本后keepalive包含但被exclude排除的组件不会有以上两个hook

参数

keepalive可以接收3个属性做为参数进行匹配对应的组件进行缓存

• include 包含的组件

• exclude 排除的组件

• max 缓存组件的最大值

其中include,exclude可以为字符，数组，以及正则表达式
max 类型为字符或者数字

代码理解

 
   
   
 

  
    
    
  
// 只缓存组件name为a或者b的组件
  
    
    
  
<keep-alive include="a,b"> 
  
    
    
  
  <component :is="currentView" />
  
    
    
  
</keep-alive>
  
    
    
  


  
    
    
  
// 组件名为c的组件不缓存
  
    
    
  
<keep-alive exclude="c"> 
  
    
    
  
  <component :is="currentView"/>
  
    
    
  
</keep-alive>
  
    
    
  


  
    
    
  
// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子也就是只缓存a组件
  
    
    
  
<keep-alive include="a,b" exclude="b"> 
  
    
    
  
  <component :is="currentView"/>
  
    
    
  
</keep-alive>
  
    
    
  


  
    
    
  
// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
  
    
    
  
<keep-alive exclude="c" max="5"> 
  
    
    
  
  <component :is="currentView"/>
  
    
    
  
</keep-alive>
 
   
   
 

配合router使用

 
   
   
 

  
    
    
  
<!-- template -->
  
    
    
  
// 意思就是$router.meta.keepAlive值为真是将组件进行缓存
  
    
    
  
<keep-alive>
  
    
    
  
    <router-view v-if="$router.meta.keepAlive"></router-view>
  
    
    
  
</keep-alive>
  
    
    
  
<router-view v-if="!$router.meta.keepAlive"></router-view>
  
    
    
  


  
    
    
  
//router配置
  
    
    
  
new Router({
  
    
    
  
    routes: [
  
    
    
  
        {
  
    
    
  
            name: 'a',
  
    
    
  
            path: '/a',
  
    
    
  
            component: A,
  
    
    
  
            meta: {
  
    
    
  
                keepAlive: true
  
    
    
  
            }
  
    
    
  
        },
  
    
    
  
        {
  
    
    
  
            name: 'b',
  
    
    
  
            path: '/b',
  
    
    
  
            component: B
  
    
    
  
        }
  
    
    
  
    ]
  
    
    
  
})
 
   
   
 

总结

keepalive是一个抽象组件，缓存vnode，缓存的组件不会被mounted，为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数

最近答题

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

关注「JS每日一题」，参与答题！