011-keep-alive详解

keep-alive详解

  • 1、简介
  • 2、keep-alive的使用效果
    • 未使用keep-alive的效果图
    • 使用keep-alive的效果图
    • include和exclude指定是否缓存某些组件
    • 使用keep-alive的钩子函数执行顺序问题
  • 3、keep-alive的应用场景举例
  • 4、总结

1、简介

  • keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
  • 原理: 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中,在 render(页面渲染) 时,如果 VNode 的 name 符合缓存条件(可以用 include 以及 exclude 控制),则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

2、keep-alive的使用效果

demo分为上面的路由导航部分,下面的内容区部分。点击上面的路由导航,路由视图渲染对应的路由组件。效果图如下:

未使用keep-alive的效果图

请添加图片描述
对应代码

// #App.vue中
<template><div class="box"><!-- 路由导航 --><div class="nav"><router-link to="/">去home页面</router-link><router-link to="/about">去about页面</router-link><router-link to="/detail">去detail页面</router-link></div><!-- 路由导航对应的内容区 --><main><router-view></router-view></main></div>
</template>// home.vue中,放置一个复选框
<el-checkbox v-model="checked">备选项</el-checkbox>// about.vue中,放置一个输入框
<el-input v-model="input" placeholder="请输入内容"></el-input>// detail.vue中方式一个下拉框
<el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option>
</el-select>

分析:
我们发现,当我们没有使用keep-alive组件包裹住router-view视图组件的时候,左边~我们在去home页面勾选了,在去about页面输入了,在去detail页面下拉选择了,离开这个路由页面,再回来时,我们发现我们之前做的操作,勾选、输入、下拉选择都不存在了,之前的状态都没了。原因很简单,当离开这个路由页面的时候,会触发这个路由页面对应组件上的destroy钩子方法,然后这个路由页面对应的组件就被销毁了,组件销毁了,组件上的挂载的数据也就啥也没有了。

使用keep-alive的效果图

请添加图片描述
对应代码

<template><div class="box"><!-- 路由导航 --><div class="nav"><router-link to="/">去home页面</router-link><router-link to="/about">去about页面</router-link><router-link to="/detail">去detail页面</router-link></div><!-- 路由导航对应的内容区 --><main><keep-alive> <!-- 使用keep-alive包了一层,就可以缓存啦 --><router-view></router-view></keep-alive></main></div>
</template>

分析:
我们给视图层组件使用keep-alive包住以后,我们发现,我们勾选、输入、下拉选择的内容,在路由来回切换的时候,就不会丢失了,即使用keep-alive保存了之前的组件状态。

引出问题:
看到这里我们发现,直接加上keep-alive的话,会把所有的router-view层级下的视图的组件都缓存了,不过有的时候,我们只想缓存部分,不想缓存所有的,那这怎么办呢?没关系,大佬们已考虑到了,已经提前为我们解决好了,就是keep-alive中的include、exclude属性。

include和exclude指定是否缓存某些组件

参数名描述
include字符串或正则表达式名称匹配的组件会被缓存
exclude字符串或正则表达式名称匹配的组件不会被缓存
max数字最多可以缓存多少组件实例

💡 Tips:include/exclude 值是组件中的 name 命名,而不是路由中的组件 name 命名

// 指定home组件和about组件被缓存
<keep-alive include="home,about" ><router-view></router-view>
</keep-alive>// 除了home组件和about组件别的都缓存,本例中就是只缓存detail组件
<keep-alive exclude="home,about" ><router-view></router-view>
</keep-alive>

引出问题:
我们知道组件中都有对应的逻辑js部分,而且组件要发请求获取数据的,一般情况下,我们都是在created或者mounted钩子中去发请求,向后端的大佬要数据的,关于使用keep-alive后的组件的钩子函数的问题,我们需要注意一下

使用keep-alive的钩子函数执行顺序问题

首先使用了keep-alive的组件以后,组件上就会自动加上了activated钩子和deactivated钩子。

  • activated 当组件被激活(使用)的时候触发 可以简单理解为进入这个页面的时候触发
  • deactivated 当组件不被使用(inactive状态)的时候触发 可以简单理解为离开这个页面的时候触发

假设我们只缓存home组件,我们先看一下代码,再在钩子中打印出对应的顺序。就知道钩子执行的顺序了:

<template><div><el-checkbox v-model="checked">备选项</el-checkbox></div>
</template>
<script>
export default {name: "home",data() { return { checked: false } },created() {console.log("我是created钩子");},mounted() {console.log("我是mounted钩子");},activated() {console.log("我是activated钩子");},deactivated() {console.log("我是deactivated钩子");},beforeDestroy() {console.log("我是beforeDestroy钩子");},
};
</script>

我们来回切换 看控制台打印顺序,得出结论如下:

  • 初始进入和离开 created --> mounted --> activated --> deactivated
  • 后续进入和离开 activated --> deactivated

所以我们可以在activated 和deactivated钩子中去做一些逻辑处理,这两个钩子有点类似mounted和beforeDestroy钩子,但是还是不一样。毕竟使用keep-alive不会销毁组件

3、keep-alive的应用场景举例

  • 查看表格某条数据详情页,返回还是之前的状态,比如还是之前的筛选结果,还是之前的页数等
  • 填写的表单的内容路由跳转返回还在,比如input框、下选择拉框、开关切换等用户输入了一大把东西,跳转再回来不能清空啊,不能让用户再写一遍啊,是吧老铁
  • 反正就是保留之前的状态,具体应用场景其实也有很多,在此不赘述…

4、总结

  1. 用于保留组件状态或避免重新渲染,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
  2. 当组件在 keep-alive内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
  3. 页面第一次进入时,生命周期触发:created-mounted-activated,后续进入和离开 activated --> deactivated。
  4. <keep-alive includ=“xxx”> <router-view /> </keep-alive> 指定部分 name 为 xxx 的组件会被缓存。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/734353.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java开发从入门到精通(一):Docker

Docker 目录&#xff1a; Docker 简介 Docker 常见指令 Docker 运行原理 Docker 网络 可视化界面 Docker和k8s区别&#xff1f; 1 Docker 简介 1.1 Docker 由来 Docker 是基于 Go 语言开发的一个容器引擎&#xff0c;Docker是应用程序与系统之间的隔离层。通常应用程序对安装…

深入浅出计算机网络 day.2 概论⑤ 计算机网络的性能指标

请等一等&#xff0c; 用一个完整的春天 捣碎麦田 —— 24.3.10 一、计算机网络的性能指标 上 计算机网络的性能指标被用来从不同方面度量计算机网络的性能 常用的八个计算机网络性能指标 速率 比特&#xff08;bit&#xff09;是计算机中数据量的基本单位&#xff0c;一个比特…

算法D38| 动态规划1 | 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

理论基础 无论大家之前对动态规划学到什么程度&#xff0c;一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目&#xff0c;看我讲的理论基础&#xff0c;会有感觉 是不是简单题想复杂了&#xff1f; 其实并没有&#xff0c;我讲的理论基础内容&#xff0c;在动…

TensorFlow 量化投资分析

文章目录 一、TensorFlow 量化投资的一般步骤二、TensorFlow 如何建立特征工程三、TensorFlow 构建量化投资模型简单示例 一、TensorFlow 量化投资的一般步骤 数据准备&#xff1a;收集和整理用于训练和测试模型的金融数据&#xff0c;例如股票价格、财务指标等。特征工程&…

03- javaBean 新花样? record 新特性

定义和特性 JDK16 最终增加了record关键字&#xff0c;record定义的类希望成为数据传输对象 也叫数据载体&#xff0c;使用record 时候&#xff0c;编译器会自动生成&#xff1a; 不可变的字段一个规范的构造器每个元素(组件)都有访问方法equalshashCodetoString public rec…

SQL 注入攻击 - insert注入

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、注入原理 描述:insert注入是指通过前端注册的信息被后台通过insert操作插入到数据库中。如果后台没有做相应的处理,就可能导致insert注入漏洞。原因:后台未对用户输入进行充…

python爬虫(4)

#前期先说明一下为啥爬虫需要学习数组的存储和处理&#xff0c;只是说在你后期接触到最简单的爬虫后有一个地方可以存放你的数据# 下面为大家带来一个我在做excel表整理时的代码以及上次代码的结果 上次代码的结果&#xff1a; 新的代码&#xff1a; import numpy as np im…

使用51单片机控制lcd1602字体显示

部分效果图&#xff1a; 准备工作&#xff1a; 51单片机&#xff08;BST&#xff09;1602显示屏 基础知识&#xff1a; 注&#xff1a;X表示可以是0&#xff0c;也可以是1&#xff1b; DL 1&#xff0c; N 1&#xff0c; F 0&#xff0c; 代码一&#xff1a; 要求显示字母…

MySQL下载及安装

引言 在当今数据驱动的世界里,数据库管理系统(DBMS)扮演着至关重要的角色。MySQL,作为一个广泛使用的关系型数据库管理系统,因其强大的性能、可靠性以及易用性,在各种应用场景中都有着重要的地位。无论是小型项目、网站还是大型的企业级应用,MySQL都能够提供高效的数据存…

网络安全审计是什么意思?与等保测评有什么区别?

网络安全审计和等保测评在信息安全领域中都是非常重要的环节。但不少人对于这两者是傻傻分不清楚&#xff0c;今天我们就来简单聊聊网络安全审计是什么意思&#xff1f;与等保测评有什么区别&#xff1f; 网络安全审计是什么意思&#xff1f; 网络安全审计是通过对网络系统和网…

学习和认知的四个阶段,以及学习方法分享

本文分享学习的四个不同的阶段&#xff0c;以及分享个人的一些学习方法。 一、学习认知的四个阶段 我们在学习的过程中&#xff0c;总会经历这几个阶段&#xff1a; 第一阶段&#xff1a;不知道自己不知道&#xff1b; 第二阶段&#xff1a;知道自己不知道&#xff1b; 第三…

数据结构部分

来源地址 一 数据结构 1 堆和树之间的区别 区别就在于树是没有特定顺序的&#xff0c;你需要遍历整个树才能找到特定元素&#xff1b;而堆是有序的&#xff0c;你可以直接找到最大&#xff08;或最小&#xff09;的元素。 堆&#xff1a;假设你正在开发一个任务调度系统&…

JimuReport积木报表 v1.7.2 版本发布,低代码报表工具

项目介绍 一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完成报…

YoLo进化史《A COMPREHENSIVE REVIEW OF YOLO: FROM YOLOV1 TOYOLOV8 AND BEYOND》

Abstract YOLO已成为机器人、无人驾驶汽车和视频监控应用的核心实时目标检测系统。我们对YOLO的发展进行了全面的分析&#xff0c;研究了从最初的YOLO到YOLOv8的每次迭代中的创新和贡献。我们首先描述标准指标和后处理;然后&#xff0c;我们讨论了网络架构的主要变化和每个模型…

C++面试题和笔试题(一)

今天面试了一家100人以上的小公司&#xff0c;做QT上位机开发&#xff0c;个人感觉凉凉。以下是笔试题和我能回忆起的面试题 目录 一、笔试题 1. 什么是C中的指针 官方解释&#xff1a; 自己的理解&#xff1a; 2.什么是引用&#xff0c;它与指针有什么不同 官方解释&…

SpringCloud-Alibaba-Nacos教程

SpringCloud-Alibaba-Nacos教程 下载地址 https://github.com/alibaba/nacos/releases/tag/2.2.3 直接进入bin包 运行cmd命令 startup.cmd -m standalone 运行成功后 进入nacos可视化页面 账号密码默认都是nacos http://localhost:8848/nacos 微服务入驻Nacos服务注册…

阿尔巴尼亚借助ChatGPT加快欧盟入会进程

原文&#xff1a;https://www.euractiv.com/section/politics/news/albania-to-speed-up-eu-accession-using-chatgpt/ 来源&#xff1a;https://weibo.com/1727858283/O3ZoWp6oO?refer_flag1001030103_ 阿尔巴尼亚政府计划利用ChatGPT技术&#xff0c;将成千上万页的欧盟法律…

【Python】成功解决IndexError: list index out of range

【Python】成功解决IndexError: list index out of range &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您的订…

首次实现Go调用C的dll文件

首先&#xff0c;要使用Go调用C的DLL文件&#xff0c;你需要遵循以下步骤&#xff1a; 编写C代码&#xff1a; 首先&#xff0c;编写你的C代码&#xff0c;并将其编译成DLL文件。假设你有一个名为example.c的C源文件&#xff0c;其中包含你要调用的函数。 // example.c #includ…

探索stable diffusion的奇妙世界--01

目录 1. 理解prompt提示词&#xff1a; 2. Prompt中的技术参数&#xff1a; 3. Prompt中的Negative提示词&#xff1a; 4. Prompt中的特殊元素&#xff1a; 5. Prompt在stable diffusion中的应用&#xff1a; 6. 作品展示&#xff1a; 在AI艺术领域&#xff0c;stable di…