什么是keep-alive?

一.对页面进行缓存

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

简单来说：在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到 vue 的 keep-alive 技术了.

比如我在这用home,about两个组件进行路由切换在两个组件中都添加一个input框

<template><div class="home"><input type="text"></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'home',components: {HelloWorld}
}
</script>

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

当我们在home组件的输入框输入一些内容的时候，然后切换到about组件，在切换回home组件，我们会发现之前输入的内容被清空了，其实也容易理解，就是当切换到about组建的时候，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>

这样写的话有一个缺点:就是当你在home组件写完之后切换到about组件时你会发现home组件中的值也被保存下来了，当然这样的话about组件的值也会被缓存下来，就是所有的路由组件都被缓存了，严重浪费性能，而且也不符合需求，我们现在只想缓存home组件。

二. 在keep-alive上有两个属性

有两个参数
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

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

这样的话home组件就会被缓存，about没有被缓存，除了这个我们还可以利用路由中的meta属性来控制

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

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

三.在 router-view 上使用可以缓存该路由组件

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来获取当前组件是否处于活动状态

activated(){console.log("出现")},
deactivated(){console.log("消失")}

好了今天我们就分享到这吧！！！

如何理解什么是keep-alive?相关推荐

linux tcp keepalive,Linux下TCP的Keepalive相关参数学习
一基本原理 TCP的Keepalive可以简单理解成为keep tcp alive,用来检测TCP sockets的连接是否正常或是已经断开. Keeplived的原理很简单,当建立一个TCP连接时 ...
深入理解Ribbon之源码解析
什么是Ribbon Ribbon是Netflix公司开源的一个负载均衡的项目,它属于上述的第二种,是一个客户端负载均衡器,运行在客户端上.它是一个经过了云端测试的IPC库,可以很好地控制HTTP和TC ...
Activity采用栈式管理的理解
本文来自:安卓航班网 Android针对Activity的管理使用的是栈,就是说某一个时刻只有一个Activity处在栈顶,当这个Activity被销毁后,下面的Activity才有可能浮到栈顶,或者 ...
《深入理解Java虚拟机》-----第3章垃圾收集器与内存分配策略
Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的"高墙",墙外面的人想进去,墙里面的人却想出来. 3.1 概述说起垃圾收集(Garbage Collection,G ...
深入理解JVM之二：垃圾收集器概述
前言我们知道Java的内存区域分为程序计数器.虚拟机栈.本地方法栈.Java堆和方法区,而且其中的程序计数器.虚拟机栈和本地方法栈都是线程独立的,也就是说这三块内存区域的生命周期与线程是同生共死的. ...
《深入理解java虚拟机》学习笔记四/垃圾收集器GC学习/一
Grabage Collection GC GC要完毕的三件事情: 哪些内存须要回收? 什么时候回收? 怎样回收? 内存运行时区域的各个部分中: 程序计数器.虚拟机栈.本地方法栈这3个区域随 ...
课时 16 深入理解 etcd：基于原理解析(曾凡松)
本文将主要分享以下三方面的内容: 第一部分,会为大家介绍 etcd 项目发展的整个历程,从诞生至今 etcd 经历的那些重要的时刻: 第二部分,会为大家介绍 etcd 的技术架构以及其内部的实现机制, ...
使用java理解程序逻辑第十二章_Java弱引用的理解与使用
Java弱引用的理解与使用 WeakReference 前言看到篇帖子, 国外一个技术面试官在面试senior java developer的时候, 问到一个weak reference相关的问题. ...
Eureka深入理解
客户端负载均衡Ribbon,声明式的Http Client Feign,那我们回到Eureka上面去,我们对Eureka进行一些补充,对他进行一些更深入的理解,我们来看Eureka的文档Service ...
TCP的FIN_WAIT1状态理解|深入理解TCP
原文链接: https://blog.csdn.net/dog250/article/details/81697403 近期遇到一个问题,简单点说,主机A上显示一条ESTABLISHED状态的TCP连 ...

如何理解什么是keep-alive?

什么是keep-alive?

一.对页面进行缓存

二. 在keep-alive上有两个属性

三.在 router-view 上使用可以缓存该路由组件

如何理解什么是keep-alive?相关推荐

最新文章

热门文章