JS每日一题:vue中keepalive怎么理解？

20190212问

vue中keepalive怎么理解？

说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的能够研究源码 https://github.com/vuejs/vue/...

什么是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每日一题

JS每日一题能够当作是一个语音答题社区
天天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在第二天0点推送当天的参考答案

• 注 毫不仅限于完成当天任务，更可能是查漏补缺，学习群内其它同窗优秀的答题思路

点击加入答题