keep-alive用法

方法一 keep-alive 结合include属性缓存组件

使用情况：例如一个搜索框，输入文字后，切换到另一个组件，再返回的时候input框的文字会消失，所以要使文本框组件缓存

其实在keep-alive上有两个属性
include 值为字符串或者正则表达式，匹配的组件会被缓存。
exclude 值为字符串或正则表达式，匹配的组件不会被缓存。

// include 只缓存组件名字为home的组件，其他组件不会缓存，而exclude恰好相反
<keep-alive include="home"><router-view />
</keep-alive>

方法二 keep-alive结合路由中的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：组件激活时调用
deactivated：组件停用时调用

  activated(){//  进入home组件的那一刻就会打印console.log("哎呀看见我了")console.log("----------activated--------")},deactivated(){//  离开home组件的那一刻就会打印console.log("讨厌！！你又走了")console.log("----------deactivated--------")}

keep-alive用法相关推荐

Python-----多线程threading用法
threading模块是Python里面常用的线程模块,多线程处理任务对于提升效率非常重要,先说一下线程和进程的各种区别,如图概括起来就是 IO密集型(不用CPU) 多线程计算密集型(用CPU) 多 ...
python多个strip_python 格式化多个Python3中strip()、lstrip()、rstrip()用法详解
Python中有三个去除头尾字符.空白符的函数,它们依次为: strip: 用来去除头尾字符.空白符(包括n.r.t.' ',即:换行.回车.制表符.空格) lstrip:用来去除开头字符.空白符(包 ...
boost中unordered_map的用法
学习数据结构的时候偶然得知有个unordered_map,以前没有用过,查了查相关内容,据说效率比map高出很多,而且耗资源也少,研究一下至于具体效率咋样我就不去验证了,网上太多了参考:http ...
交互式数据包处理程序 Scapy 用法
From:https://www.cnblogs.com/hongxueyong/p/5641475.html Scapy 用法官方文档:http://scapy.readthedocs.io/en/ ...
left join 和join区别_sleep、yield、join方法简介与用法 sleep与wait区别多线程中篇
Object中的wait.notify.notifyAll,可以用于线程间的通信,核心原理为借助于监视器的入口集与等待集逻辑通过这三个方法完成线程在指定锁(监视器)上的等待与唤醒,这三个方法是以锁( ...
python中property函数_python 邮件表格Python中property函数用法实例分析
本文实例讲述了Python中property函数用法.分享给大家供大家参考,具体如下: 通常我们在访问和赋值属性的时候,都是在直接和类(实例的)的__dict__打交道,或者跟数据描述符等在打交道.但 ...
IOCP扩展方法AcceptEx, DisconnectEx, GetAcceptExSockaddr用法示例
这篇文章记录了我刚接触IOCP模型时的理解,对于初学者,应该算不错的调试程序,仅有一个400多行代码的dpr文件,可以直接用WriteLn输出信息,前提是会用delphi建立Console Appli ...
python中特殊变量-python list每三个分成一组python中星号变量的几种特殊用法
在Python中星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法"在变量前添加单个星号或两个星号",实现多参数的传入或变量的拆解,本文将详细介绍"星号参数" ...
python中seaborn库_GitHub - a13544835729/python-seaborn: python seaborn库基础用法
Seaborn 一.概念 1分组绘图 #比如说需要在一张图上绘制两条曲线,分别是南方和北方的气温变化,分别用不同的颜色加以区分.在seaborn中用hue参数控制分组绘图 2.分面绘图 #其实就是在一 ...
keep alive是什么？
当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.k ...

keep-alive用法

方法一 keep-alive 结合include属性缓存组件

方法二 keep-alive结合路由中的meta属性来控制组件缓存

keep-alive用法相关推荐

最新文章

热门文章