内容简介:vue中keepalive怎么理解?说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化,使组件状态维持不变,在下一次展示时, 也不会进行重新init
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点推送当天的参考答案
- 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 理解原型其实是理解原型链
- 要理解深度学习,必须突破常规视角去理解优化
- 深入理解java虚拟机(1) -- 理解HotSpot内存区域
- 荐 【C++100问】深入理解理解顶层const和底层const
- 深入理解 HTTPS
- 深入理解 HTTPS
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。