当前位置: 首页 > news >正文

keep-alive

keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

使用场景

使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

例如:

当我们从首页–>列表页–>商详页–>再返回,这时候列表页应该是需要keep-alive

首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存),这时候可以按需来控制页面的keep-alive

使用方式1:结合include和exclude

keep-alive可以设置以下props属性:

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

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

// router.js
{path: '/home',name: 'home',component: () => import('../views/home.vue')
},
{ path: '/test',name: 'test',component: () => import('../views/test.vue')
},
// App.vue
<keep-alive include="test"><router-view/>
</keep-alive>----------------------------------------------------------------------------------------------------------------
补充: include/exclude 值的多种形式。// 1. 将缓存 name 为 test 的组件(基本)
<keep-alive include='test'><router-view/>
</keep-alive>// 2. 将缓存 name 为 a 或者 b 的组件,结合动态组件使用
<keep-alive include='a,b'><router-view/>
</keep-alive>// 3. 使用正则表达式,需使用 v-bind
<keep-alive :include='/a|b/'><router-view/>
</keep-alive>	// 4.动态判断
<keep-alive :include='includedComponents'><router-view/>
</keep-alive>// 5. 将不缓存 name 为 test 的组件
<keep-alive exclude='test'><router-view/>
</keep-alive>// 6. 和 `<transition>` 一起使用
<transition><keep-alive><router-view/></keep-alive>
</transition>// 7. 数组 (使用 `v-bind`)
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>
使用方式2:通过路由中的 meta 属性控制是否需要缓存

将 test 路由中的 meta 添加 keepAlive 属性为 true,表示当前路由组件要进行缓存。

在路由中设置keepAlive属性判断是否需要缓存

// router.js
{path: '/home',name: 'home',component: () => import('../views/home.vue')
},
{ path: '/test',name: 'test',meta:{keepAlive:true},component: () => import('../views/test.vue')
},
<keep-alive><router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
使用方式3:结合路由守卫来实现

实际开发中,我们可以结合路由守卫来实现需要缓存组件的缓存。

export default {beforeRouteLeave(to, from, next) {to.meta.keepAlive = true;next();}
}
生命周期函数

设置了 keep-alive 缓存的组件,会多出两个生命周期钩子(activateddeactivated):

  • 首次进入组件时:beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
  • 再次进入组件时:beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated

相关文章:

keep-alive

keep-alive 是 Vue 的内置组件&#xff0c;当它包裹动态组件时&#xff0c;会缓存不活动的组件实例&#xff0c;而不是销毁它们。 keep-alive 包裹动态组件时&#xff0c;会缓存不活动的组件实例&#xff0c;而不是销毁它们 使用场景 使用原则&#xff1a;当我们在某些场景下…...

Maven的生命周期及常用命令

文章目录1、Maven生命周期1.1、clean生命周期1.2、default生命周期1.3、site生命周期2、Maven常用命令1、Maven生命周期 Maven有三套生命周期系统&#xff1a; 1、clean生命周期 2、default生命周期 3、site生命周期 三套生命周期之间相互独立&#xff0c;每套生命周期包含一…...

【Java开发】JUC基础 03:线程五大状态和主要方法

1 概念介绍&#x1f4cc; 五大状态&#xff1a;new&#xff1a;Thread t new Thread(); 线程对象一旦被创建就进入到了新生状态&#xff1b;就绪状态&#xff1a;当调用start()方法&#xff0c;线程立即进入就绪状态&#xff0c;但不意味着立即调度执行&#xff1b;运行状态&a…...

docker打包容器 在另一个机器上运行

1&#xff1a;将运行中的容器变为镜像docker commit 容器id 镜像名&#xff08;docker commit 89e81386d35e aabbcc&#xff09;2:将容器打包成tar包docker save -o xxx.tar 镜像名 &#xff08;当前路径下会生成一个tar的文件&#xff09;3&#xff1a;将tar包压缩为gz包tar -…...

2023年全国最新保安员精选真题及答案9

百分百题库提供保安员考试试题、保安职业资格考试预测题、保安员考试真题、保安职业资格证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 91.护卫对象在公共场所参加活动前&#xff0c;保安员需要事先&#xff08;&#xff0…...

arduino-sentry2之卡片篇

欧克,今天在学生的强烈要求下 我又重启arduino的sentry2调试篇 目前实验结果,可以检测到10张交通卡片 也就是如图所示十张 具体视频如下: https://live.csdn.net/v/279170 具体代码如下: #include <Arduino.h> #include <...

七、JUC并发工具

文章目录JUC并发工具CountDownLatch应用&源码分析CountDownLatch介绍CountDownLatch应用CountDownLatch源码分析有参构造await方法countDown方法CyclicBarrier应用&源码分析CyclicBarrier介绍CyclicBarrier应用CyclicBarrier源码分析CyclicBarrier的核心属性CyclicBarr…...

C++ string类(二)及深浅拷贝

一、string类方法使用举例1.迭代器迭代器本质&#xff1a;指针&#xff08;理解&#xff09;迭代器&#xff1a;正向迭代器&#xff1a; begin() | end() 反向迭代器&#xff1a; rbegin() | rend()2.find使用//找到s中某个字符 void TestString3() {string s("AAADEFNUIE…...

「TCG 规范解读」TCG 软件栈 TSS (上)

可信计算组织&#xff08;Ttrusted Computing Group,TCG&#xff09;是一个非盈利的工业标准组织&#xff0c;它的宗旨是加强在相异计算机平台上的计算环境的安全性。TCG于2003年春成立&#xff0c;并采纳了由可信计算平台联盟&#xff08;the Trusted Computing Platform Alli…...

(二)Markdown编辑器的使用效果 | 以CSDN自带MD编辑器为例

Markdown编辑器使用指南 &#xff08;一&#xff09;Markdown编辑器的使用示例 | 以CSDN自带MD编辑器为例&#xff08;二&#xff09;Markdown编辑器的使用效果 | 以CSDN自带MD编辑器为例 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xf…...

WebSocket网络通信执行流程

目录WebSocket网络通信执行流程相关概念执行流程WebSocket网络通信执行流程 WebSocket协议&#xff1a;通过单个TCP连接在客户端和服务器之间建立全双工双向通信通道。 WebSocket 对象&#xff1a;提供了用于创建和管理 WebSocket 连接&#xff0c;以及可以通过该连接发送和接…...

【Shell学习笔记】4.Shell 基本运算符

前言 本章介绍Shell的基本运算符。 Shell 基本运算符 Shell 和其他编程语言一样&#xff0c;支持多种运算符&#xff0c;包括&#xff1a; 算数运算符关系运算符布尔运算符字符串运算符文件测试运算符 原生bash不支持简单的数学运算&#xff0c;但是可以通过其他命令来实现…...

无代码资讯 | 《低代码开发平台能力要求》发布;CADP列入Gartner《2022-2024 中型企业技术采用路线图》

栏目导读&#xff1a;无代码资讯栏目从全球视角出发&#xff0c;带您了解无代码相关最新资讯‍。TOP3 大事件1、《低代码开发平台能力要求》团体标准正式发布近日&#xff0c;中国电子工业标准化协会发布公告&#xff08;中电标【2022】037 号&#xff09;&#xff0c;由中国电…...

智能家居Homekit系列一智能插座

WiFi智能插座对于新手接触智能家居产品更加友好&#xff0c;不需要额外购买网关设备 很多智能小配件也给我们得生活带来极大的便捷&#xff0c;智能插座就是其中之一&#xff0c;比如外出忘记关空调&#xff0c;可以拿起手机远程关闭。 简单说就是&#xff1a;插座可以连接wi…...

React(三):脚手架、组件化、生命周期、父子组件通信、插槽

React&#xff08;三&#xff09;一、脚手架安装和创建1.安装脚手架2.创建脚手架3.看看脚手架目录4.运行脚手架二、脚手架下从0开始写代码三、组件化1.类组件2.函数组件四、React的生命周期1.认识生命周期2.图解生命周期&#xff08;1&#xff09;Constructor&#xff08;2&…...

2023年电子竞技行业报告

第一章 行业概况 电子竞技也被称为电竞或eSports&#xff0c;是一种电子游戏的竞技活动&#xff0c;玩家在这里与其他人或团队对战&#xff0c;通常是在网络上或特定场地上进行。 电子竞技行业的发展与互联网和计算机技术的进步密不可分&#xff0c;同时还受到游戏开发商、赞…...

小朋友就餐-课后程序(JAVA基础案例教程-黑马程序员编著-第八章-课后作业)

【案例8-5】 小朋友就餐问题 【案例介绍】 1.任务描述 一圆桌前坐着5位小朋友&#xff0c;两个人中间有一只筷子&#xff0c;桌子中央有面条。小朋友边吃边玩&#xff0c;当饿了的时候拿起左右两只筷子吃饭&#xff0c;必须拿到两只筷子才能吃饭。但是&#xff0c;小朋友在吃…...

大数据|Hadoop系统

目录 &#x1f4da;Hadoop介绍 &#x1f4da;Hadoop优点 &#x1f4da;Hadoop的体系结构 &#x1f430;HDFS的体系结构 &#x1f430;MapReduce的体系结构 &#x1f430;HDFS和MapReduce的协同作用 &#x1f4da;Hadoop与分布式开发 &#x1f430;MapReduce计算模型 &a…...

2.递归算法

递归算法的两个特点&#xff08;很重要&#xff09;调用自身要有结束条件void func1(int x) {printf("%d\n", x);func1(x - 1); }func1会一直死循环&#xff0c;没有使其结束的条件&#xff0c;所以不是递归void func2(int x) {if (x > 0){printf("%d\n"…...

MySQL---触发器

MySQL—触发器 ​ 将两个关联的操作步骤写到程序里面&#xff0c;并且要用事务包裹起来&#xff0c;确保两个操作称为一个原子操作&#xff0c;要么全部执行&#xff0c;要么全部不执行 ​ 创建一个触发器&#xff0c;让商品信息数据的插入操作自动触发库存数据的插入操作 ​…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...