keep-alive的作用以及使用方法

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现

我这里利用脚手架创建项目后会生成home和about两个组件，并且通过路由进行切换

home组件

<template><div class="home"><input type="text"></div>
</template><script>
//  此处的@符号表示目录 src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'home',components: {HelloWorld}
}
</script>

about组件

<template><div class="about"><input type="text"></div>
</template>
<script>
export default {name:"about"
}
</script>

同样在about组件也放了一个输入框

当我们在home组件的输入框输入一些内容的时候，然后切换到about组件，在切换回home组件，我们会发现之前输入的内容被清空了，其实也容易理解，就是当切换到about组建的时候，home组件就被销毁了，输入框的值自然被清空了

在home组件写了destroyed生命周期函数

当切换到about组件的时候home组件的destroyed就触发了，所以home组件被销毁了
那么此时我们就可以利用keep-alive组件进行包裹router-view组件，将不活动的组件缓存起来

App组件

<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><keep-alive><router-view /></keep-alive></div>
</template>

写完之后会发现当切换到about组件时，home组件中的destroyed并没有触发,并且home组件的值也保存了下来

但是这样也肯定不好，我们会发现，about组件的值也被缓存了，就是所有的路由组件都被缓存了，严重浪费性能，而且也不符合需求，我们现在只想缓存home组件

在keep-alive上有两个属性

字符串或正则表达式。只有匹配的组件会被缓存。

include 值为字符串或者正则表达式匹配的组件name会被缓存。
exclude 值为字符串或正则表达式匹配的组件name不会被缓存。
首先利用include实现，匹配到组件中定义的name，将进行缓存

<keep-alive include="home"><router-view />
</keep-alive>

我们会发现home已经被缓存了，但是about没有被缓存

而exclude就是排除了，这个就不在演示了，很简单，除了这个我们还可以利用路由中的meta属性来控制

{path: '/',name: 'home',meta:{keepAlive:true},component: Home}

将home的路由规则钟的meta添加keepAlive属性为true，也就是当前路由组件要进行缓存

keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些

<keep-alive><router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

这样组件的缓存是实现了，但是还是会有一些问题，就是因为组件被缓存，并没有被销毁，所以组件在切换的时候也就不会被重新创建，自然也就不会调用created等生命周期函数，所以此时要使用activated与deactivated来获取当前组件是否处于活动状态

我在home组件里面写入了activated与deactivated生命周期函数

activated(){console.log("哎呀看见我了")console.log("----------activated--------")},deactivated(){console.log("讨厌！！你又走了")console.log("----------deactivated--------")}

通过上面的gif图相信已经看得很清楚了，此时keep-Alive也就差不多了

keep-alive的作用以及使用方法相关推荐

ios10 safari浏览器在touchmove 里面写e.preventDefault()；不起作用的解决方法
ios10 safari浏览器在touchmove 里面写e.preventDefault(); 不起作用的解决方法参考文章: (1)ios10 safari浏览器在touchmove 里面写 ...
java中flush函数作用_Java语言中flush()函数作用及使用方法详解
最近在学习io流,发现每次都会出现flush()函数,查了一下其作用,起作用主要如下 //------–flush()的作用--------– 笼统且错误的回答: 缓冲区中的数据保存直到缓冲区满后才写 ...
c语言定时器作用,单片机定时器的作用及使用方法详解
单片机定时器的作用及使用方法详解单片机定时器在单片机的功能是很重要的,它一般被用作定时功能,来做定时检测.定时响应和定时控制,并且可以产生毫秒宽的脉冲信号来驱动步进电机.计时和计数的最终功能是通过计 ...
Python之pyc文件作用及生成方法
Python之pyc文件作用及生成方法_宗而研之的博客-CSDN博客 1 什么是pyc 首先了解下python的运行机制及特性:当我们运行python文件程序的时候,Python解释器将源码转换为字节 ...
荒野求生一直获取服务器信息,荒野求生各资源作用及获取方法
关于资源作用及获取方法! 1.木材:作用最大的资源,没有木材你将难以生存. 作用:烧制食物;蒸馏淡水;升级或建造建筑;制造武器;生火;烧制木炭等. 获取方式:砍伐海滩椰子树;砍伐雨林乔木;砍伐松木林松 ...
荒岛求生html5母狼攻,荒岛求生各资源作用及获取方法详解
荒岛求生各资源作用及获取方法详解 2018-03-06 13:45:22来源:游戏下载编辑:野狐禅评论(0) 荒岛求生地图中有很多资源可以获取,它们各有什么作用呢?下面就为大家带来荒岛求生资源作用及获 ...
荒岛求生html5母狼攻,荒岛求生各资源作用及获取方法解析荒岛求生资源怎么获得...
荒岛求生地图中有很多资源可以获取,它们各有什么作用呢?下面为大家带来荒岛求生各资源作用及获取方法解析,还不清楚的玩家一起来看看吧. 荒岛求生各资源作用及获取方法解析 1.木材:作用最大的资源,没有木材 ...
计算机网络设置中的网关是什么设备,网关是什么_网关的作用与设置方法介绍一看就明白...
网关是什么?对于普通的用户来说,电脑网关不是很明白的,不过接触电脑多了之后,大家也会常常会听到"网关"这个词,那么问题就来了,这个网关是什么意思呢?它又有哪些作用呢?今晚,智能手机 ...
关于IOS调用微信支付jsapi不起作用的解决方法
关于IOS调用微信支付jsapi不起作用的解决方法参考文章: (1)关于IOS调用微信支付jsapi不起作用的解决方法 (2)https://www.cnblogs.com/randy619/p/5 ...
电感在电路中的作用与使用方法
一. 电感器的定义. 1.1 电感的定义: 电感是导线内通过交流电流时,在导线的内部及其周围产生交变磁通,导线的磁通量与生产此磁通的电流之比. 当电感中通过直流电流时,其周围只呈现固定的磁力线,不随 ...

keep-alive的作用以及使用方法

keep-alive的作用以及使用方法相关推荐

最新文章

热门文章