keep-alive：

文章目录

概念：
对生命周期函数变化：
作用：
参数（Props）

概念：

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

对生命周期函数变化：

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

activated
在 keep-alive 组件激活时调用
deactivated
在 keep-alive 组件离开时调用

正常生命周期：beforeRouteEnter --> created --> mounted --> updated -->destroyed
使用keepAlive后生命周期：
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter --> activated --> deactivated
注：
1、这里的activated非常有用，因为页面被缓存时，created,mounted等生命周期均失效，你若想进行一些操作，那么可以在activated内完成(下面会举个栗子：列表页回到上次浏览位置)
2、activated   keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。
3、deactivated   keep-alive组件停用时调用，该钩子在服务端渲染期间不被调用。

作用：

在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
例如：

条件：1、列表页不可使用懒加载延迟加载数据，2、列表页需要使用keepAlive缓存beforeRouteLeave(to,from,next){  //离开页面之前将高度存储到sessionStorage。这里不建议用localStorage，因为session在关闭浏览器时会自动清除，而local则需要手动清除，有点麻烦。sessionStorage.setItem('scrollH',document.getElementById('demo').scrollTop)next()
},activated(){   //在activated生命周期内，从sessionStorage中读取高度值并设置到domif(sessionStorage.getItem('scrollH')){document.getElementById('demo').scrollTop=sessionStorage.getItem('scrollH')}
},

参数（Props）

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例

//缓存整个项目
//如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：
<template><div id="app"><keep-alive><router-view/></keep-alive></div>
</template>//结合Router，缓存部分页面
<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>//路由中{path: 'goods',name: 'goods',component: Goods,meta: {keepAlive: false // 不需要缓存}},{path: 'ratings',name: 'ratings',component: Ratings,meta: {keepAlive: true  // 需要缓存}},

keep-alive：相关推荐

性能测试入门（二）转：JMeter基础之一一个简单的性能测试
转自:虫师博客 https://www.cnblogs.com/fnng/archive/2012/12/22/2829479.html 个人总结: 关键词:固定QPS限制,线程组设置测试需求. 1 ...
jmeter性能测试实例_实例教程：手把手教你Jmeter性能测试
测试需求:测试20个用户访问百度,在负载达到30QPS时的平均响应时间. QPS:QueryperSecond,每秒查询率.一台查询服务器每秒能够处理的查询次数. 测试步骤: 第一步:添加线程组线程 ...
性能测试之JMeter取样器详解：sampler
1.取样器介绍取样器是用来模拟用户操作的,向服务器发送请求以及接收服务器的响应数据. 取样器是在线程组内部的元件,也就是说取样器只能在线程组中添加. 取样器(Sampler)是性能测试中向服务器发送 ...
TimesTen 应用层数据库缓存学习：12. 管理缓存环境
缓存和复制代理的启停和状态查看 cache agent的作用是将监控Oracle中数据的变化,并更新到TimesTen.因此,对于只读和AWT缓存组,cache agent都是必需的. cache a ...
[六点]Unity零基础实战：古迹探险（一）
[六点]Unity零基础实战:古迹探险(一) 基本操作工程目录 project创建文件夹,在其中创建材质,管理相关内容. 资源导入 WINDOWS中ASSET STORE中有免费资源,包括贴图,模型 ...
【pygame学习+实战】第二篇：怀旧——飞机大战
14天学习训练营导师课程: 李宁<Python Pygame游戏开发入门与实战> 李宁<计算机视觉OpenCV Python项目实战>1 李宁<计算机视觉OpenCV P ...
爬梯：常用JDK堆栈工具
Java虚拟机性能分析和故障排查工具 JDK命令行工具 JDK提供了很多工具供java程序员使用 D:\Java\JDK1.8.0_211\bin 想要往高级发展,就必须得熟练使用几种常用的jdk工具 ...
七夕节马上到了，有对象的，无对象的必备神奇用Python做一个烟花秀
今天已经周三了还有三天就是七夕节了,要给女朋友买礼物怕是来不及了! 那怎么办呢?那么就给她准备一个就全城烟花视频吧. 可除了土豪,不是所有人都能在整个城市放烟花的.对于一个普通的不能再普通的我也只能想 ...
JMeter基础之一个简单的性能测试
我们了解了jmeter的一此主要元件,创建一个简单的测试计划来使用这些元件.该计划对应的测试需求: 1)测试目标网站是www.51cto.com 2)测试目的是该网站在负载达到20 QPS 时的响应时 ...
【深入Java虚拟机JVM 09】JVM垃圾回收finalize方法--对象最有一次自我拯救
说明:文章所有内容均摘自<深入理解Java虚拟机:JVM高级特性与最佳实践(第二版)> 即使在可达性分析算法中不可达的对象,也并非是"非死不可"的,这时候它们暂时处于& ...

keep-alive：

文章目录

概念：

对生命周期函数变化：

作用：

参数（Props）

keep-alive：相关推荐

最新文章

热门文章