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点推送当天的参考答案
- 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路
点击加入答题
JS每日一题:vue中keepalive怎么理解?相关推荐
- JS每日一题:Vue中的diff算法?
20190125 Vue中的diff算法? 概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有di ...
- JS每日一题:new Vue()中发生了什么?
20190214问 new Vue()中发生了什么? 先从语法上分析,new关键字在js语言中代表实例化一个对象, 而Vue实际上是一个类, 我们简单看一下源码 源码地址 https://github ...
- JS每日一题: 小程序页面之间如何通信?
20190227 小程序页面之间如何通信? 首先将通信的模型列举出来, 分为以下几种 兄弟页面间通信 父路径页面向子路径页面通信 子路径页面向父路径页面通信 通信的方式 localStorage 本地 ...
- vue中keep-alive缓存的使用
keep-alive是什么? <keep-alive /> 是一个vue中内置组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中. 使用<keep-alive /& ...
- keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
- vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用,详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个 详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
- Vue中$refs的理解
Vue中$refs的理解 $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例. 描述 ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象 ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- 关于Vue中keep-alive的作用是什么?怎么使用?
一.概念: keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,该组件将不会销毁. 二.作用: 用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验. 三. ...
最新文章
- cisco路由器与QOS技术
- winform 不安装字体怎么应用_Shopify怎么获取第三方应用的帮助?如何从Shopify应用商店安装的应用...
- 「高并发秒杀」linux安装软件有哪几种方式
- YOLOv5 报错:“NotImplementedError: Could not run ‘torchvision::nms‘ with arguments from the ‘CUDA‘ back
- 自动生成requirements.txt
- 防止ACCESS数据库被下载的9种方法
- [Python爬虫] 之十八:Selenium +phantomjs 利用 pyquery抓取电视之家网数据
- access汇总_区块链或密码学相关论文汇总,持续更新中
- python两个数组合并、找出中位数_leetcode刷题记录-找出这两个有序数组的中位数(python版本)...
- MySQL巧妙利用help_topic表把以逗号分隔的字符串转换成行
- Android中的GalleryView实例演示-周末福利有美女图
- html5 css3 javascript从入门到精通,HTML5+CSS3+JavaScript从入门到精通(微课精编版)
- Visual Studio 安装 FLTK
- ios 现有项目接入Flutter (问题集中营--少走弯路)
- html与css笔记(旧)
- Linux 文件颜色代表含义
- 高盛报告:人工智能、机器学习和数据将推动未来生产力的发展
- 眼部识别和指纹识别,你会选择谁?
- php sftp上传图片,SFTP远道文件上传
- 免费的在线白板协作工具有哪些?