全国咨询热线:18720358503

钦州抖音微信小程序_深化了解与使用keep

类别:企业动态 发布时间:2021-01-08 浏览人次:

深入理解与使用keep-alive(配合router-view缓存整个路由页面)       这篇文章主要介绍了深入理解与使用keep-alive(配合router-view缓存整个路由页面),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化',此时 keep-alive 便可以派上用场了。 keep-alive 可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下一次显示时,也不会重现渲染。

凡科抠图: keep-alive 与 transition 相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive 。

1. keep-alive的基础使用

最基础的一般是结合动态组件去使用:

 keep-alive 
 component :is="currentView" /component 
 /keep-alive 
new Vue({
 el: '#app',
 data(){
 return {
 currentView: Test //Test为引入的子组件
})

不过此种方式并无太大的实用意义。

2. 生命周期钩子

被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated

activated

在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。

deactivated

在组件被停用时调用。

注意:只有组件被 keep-alive 包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。

3. 配合router-view使用

有些时候可能需要将整个路由页面一切缓存下来,也就是将 router-view 进行缓存。这种使用场景还是蛮多的。

在vue 2.1.0 之前,大部分是这样实现的:

 !-- template -- 
 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
})

这样配置路由的路由元信息之后,a路由的 $router.meta.keepAlive 便为 true ,而b路由则为 false 。
所以为 true 的将被包裹在 keep-alive 中,为 false 的则在外层。这样a路由便达到了被缓存的效果,如果还有想要缓存的路由,只需要在路由元中加入 keepAlive: true 即可。

4. 在2.1.0版本之后

在vue 2.1.0 版本之后,keep-alive 新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存,优先级大于include) 。

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
当使用正则或者是数组时,一定要使用 v-bind !

 !-- 逗号分隔字符串,只有组件a与b被缓存。这样使用场景变得更有意义了 -- 
 keep-alive include="a,b" 
 component :is="view" /component 
 /keep-alive 
 !-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -- 
 keep-alive :include="/a|b/" 
 component :is="view" /component 
 /keep-alive 
 !-- Array (需要使用 v-bind,被包含的都会被缓存) -- 
 keep-alive :include="['a', 'b']" 
 component :is="view" /component 
 /keep-alive 

有了include之后,再与 router-view 一起使用时便方便许多了:

 !-- 一个include解决了,不需要多写一个标签,也不需要在路由元中添加keepAlive了 -- 
 keep-alive include='a' 
 router-view /router-view 
 /keeo-alive 

5. 需要注意的地方

keep-alive 先匹配被包含组件的 name 字段,如果 ns 配置中的注册名称。 keep-alive 不会在函数式组件中正常工作,因为它们没有缓存实例。 当匹配条件同时在 include 与 exclude 存在时,以 exclude 优先级最高(当前vue 2.4.2 version)。比如:包含于排除同时匹配到了组件A,那组件A不会被缓存。 包含在 keep-alive 中,但符合 exclude ,不会调用activated 和 deactivated。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

聊城市网站建设难-酒店型的网站该如何做?酒店

新建设酒店餐厅网站时大家要充足考虑到“酒店餐厅”的运营服务特点 因而大家在制作计划方案时候重视系统软件的好用性 靠谱性 优秀性和经济发展性标准 此外还会继续留意系统软件...

2021-01-15
网站建站公司-规范而标准的流程是保证企业网站

创建一个网站并不是一件简易的事儿。尽管一些企业如今投放广告说她们只花好几百元就可以建一个网站,可是在它的身后有许多掩藏的难题。数100元的网站并不是自身设计方案的,但...

2021-01-15
企业商城建站套餐-一个阿里云域名站应当如何建

制作一个网站是非常容易的,而想要运营好一个网站就非常难。建站行业发展迅速,近几年出现了很多建站公司,而成功发展下来的又有多少呢?在一开始都是模仿,然后不断创新,慢...

2021-01-14
网页模板图片-万象云模板自助建站系统系统201

微信小程序1.增加查寻作用应用情景:公司会出现一些和本身业务流程有关的数据信息,必须给到顾客出示“查寻信息内容”或“查寻交费”服务。1)查寻信息内容:院校、学习培训组...

2021-01-14
广州凡科互联网科技股份有限公司招聘电商网络

招聘人数:23职位信息如果你拥有强大的企图心和追求理想的韧性来吧,这里,给你的不仅是一份养家糊口的工作,而是一份事业!这里,你不仅仅是一个普通的销售,而是一个想要成功...

2021-01-13
广州凡科互联网科技股份有限公司招聘财务出纳

招聘人数:7职位信息岗位职责:1、日常现金、银行、票据的收、支结算;2、登记现金、银行日记账,对各类票据做好备查登记;3、每日核对现金、银行余额,编制资金日报表;4、对各...

2021-01-13
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信