vue的keep-alive的个人理解

Posted 2021-09-29 水香木鱼

 

面试回答

keep-alive是动态组件，它也是vue的内置组件，能够在切换的过程中将状态保留在内存当中，防止重复渲染DOM

作用：

       缓存组件内部的状态，避免重新渲染，不会出现在父组件中

如何理解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包含的组件再次渲染的时候触发

• deactived 当keepalive包含的组件销毁的时候触发
  keepalive可以接收三个属性作为参数进行匹配对应的组件进行缓存

• 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使用

//意思就是$router.meta.keepalive值为真是将组件进行缓存
<keep-alive>
  <router-view v-if="$router.meta.keepalive"></router-view>
</keep-alive>
//router配置
new Router({
  router:[
    {
        name:'a',
        path:'/a',
        component:A,
        meta:{
          keepAlive:true
        },
        {
          name:'b',
          path:'/b',
          component:B
        }
      }
    ]
  })

总结

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