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

Vue:组件缓存

组件缓存 keep-alive

文章目录

  • 组件缓存 keep-alive
    • 一、keep-alive是什么
    • 二、keep-alive优点
    • 三、问题
    • 四、解决方案
      • 五、代码示例
    • 六、回顾一下钩子
    • 七、总结

一、keep-alive是什么

  • keep-alive是Vue中的一个内置组件,会缓存不活动的组件实例。并不会销毁组件,导致重新回到这个页面的时候,重新加载。
  • keep-alive不会渲染DOM元素。

二、keep-alive优点


其目的就是为了防止重复渲染DOM,减少加载时间以及性能的消耗。能够提高用户的体验。

三、问题

  • 包裹了 keep-alive 一级路由都会被缓存
<template><keep-alive>//谁往这里出我就缓存谁<router-view></router-view></keep-alive>
</template>

四、解决方案

include: 组件名数组,只有匹配的组件会被缓存
exclude:组件名数组,任何匹配的组件都不会被缓存
max : 最多可以缓存多少组件实例

  • 注意:这里的组件名:指的是name: 组件名 如果没有自己配置组件名,那么才会是文件名。

  • 需求:如果有两个组件,Layout组件 和 Deteil组件 ,我只想缓存Layout组件

五、代码示例

添加 属性 :include=“组件名数组”

<keep-alive :include="keepArr"><router-view>路由出口</router-view>
</keep-alive>

我们还可以配置组件名数组(需要缓存多个的时候)

data () {return {keepArr: ['Layout']}
}

经过缓存后:通过include属性,缓存了Layout组件,而Deteil组件未被缓存。

  • 被缓存的会多两个生命周期钩子:
  1. actived (激活时,组件被看到时触发)
  2. deactived (失活时,离开页面,组件看不见触发)

六、回顾一下钩子

  • 组件缓存了,就不会执行组件的created mounted 和 destroyed钩子
  • 所以组件缓存会给我们提供两个钩子 actived 和 deactived
created () {console.log('created 组件被加载了')
},
monted () {console.log('monted DOM渲染完了')
},
destroyed () {console.log('destroyed 组件被销毁了')
},
=========================================================
activated () {alert('返回首页')console.log('activated  组件被激活了,看到页面了')
},
deacivated () {console.log('deacivated 组件被失活了,离开页面了')
}

七、总结

  1. keep-alive是什么?
  • Vue内置的组件,包裹动态组件,可以缓存组件
  1. keep-alive有点?
  • 组件切换过程中, 把切换出去的组件保留在内存中(提升性能)
  1. keep-alive的三个属性?
  • include 组件名数组,只要匹配的都缓存
  • exclude 组件名数组, 任何匹配的组件都不会被缓存
  • max 最多可以缓存多少个组件
  1. keep-alive的使用会触发那两个生命周期钩子函数?
  • activated 当组件激活的时候触发该函数 → 进入页面触发
  • deactivated 当组件不被使用的时候触发该函数 → 离开页面触发

相关文章:

Vue:组件缓存

组件缓存 keep-alive 文章目录 组件缓存 keep-alive一、keep-alive是什么二、keep-alive优点三、问题四、解决方案五、代码示例 六、回顾一下钩子七、总结 一、keep-alive是什么 keep-alive是Vue中的一个内置组件&#xff0c;会缓存不活动的组件实例。并不会销毁组件&#xff…...

【C++】DICOM医学影像工作站PACS源码

PACS即影像存档与传输系统&#xff0c;是医学影像、数字化图像技术、计算机技术和网络通讯技术相结合的产物&#xff0c;是处理各种医学影像信息的采集、存储、报告、输出、管理、查询的计算机应用程序。 PACS是基于DICOM标准的医学影像管理系统&#xff0c;其模块覆盖了从影像…...

UDP的可靠性传输2

系列文章目录 第一章 UDP的可靠性传输-理论篇&#xff08;一&#xff09; 第二章 UDP的可靠性传输-理论篇&#xff08;二&#xff09; 文章目录 系列文章目录三、流量控制RTORTT流量控制1.如何控制流量2. 发送方何时在发送数据3.流程图 拥塞控制1.慢启动 总结1.拥塞控制和流量…...

《Java程序设计》实验报告

实验内容&#xff1a;面向对象程序设计 1、定一个名为Person的类&#xff0c;其中含有一个String类型的成员变量name和一个int类型的成员变量age&#xff0c; 分别为这两个变量定义访问方法和修改方法&#xff0c;另外再为该类定义一个名为speak的方法&#xff0c; 在其中输出n…...

数据可视化、BI和数字孪生软件:用途和特点对比

在现代企业和科技领域&#xff0c;数据起着至关重要的作用。为了更好地管理和理解数据&#xff0c;不同类型的软件工具应运而生&#xff0c;其中包括数据可视化软件、BI&#xff08;Business Intelligence&#xff09;软件和数字孪生软件。虽然它们都涉及数据&#xff0c;但在功…...

Ros noetic 机器人坐标记录运动路径和发布 实战教程(C)

前言: 承接上一篇博文本文将编写并记录上文中详细的工程项目,用于保存小车的运动路径,生成对应的csv,和加载所保存的路径到实际的Rviz中,本文将开源完整的工程项目,工程结构如下: 工程原码位于文章末尾: 路径存储: waypoint_saver 用于存储 waypoint 的节点 waypo…...

Linux入门之多线程|线程的同步|生产消费模型

文章目录 一、多线程的同步 1.概念 2.条件变量 2.1条件变量概念 2.2条件变量接口 1.条件变量初始化 2.等待条件满足 3.唤醒等待 3.销毁条件变量 2.3条件变量demo 二、生产消费模型 1.生产消费模型 2.基于BlockQueue的生产者消费者模型 3.基于C用条件变量和互斥锁实…...

MATLAB解析和保存ini文件

1. 将ini文件转换成struct结构体 function data ini2struct(filename)fid fopen(filename, r);if fid -1error(Unable to open file %s., filename);enddata struct();section ;while ~feof(fid)line fgetl(fid);line strtrim(line);% 如果是注释行或者空行&#xff0c…...

模型压缩-对模型结构进行优化

模型压缩-对模型结构进行优化 概述 模型压缩通常都是对推断过程而言&#xff0c;训练过程的计算代价通常不考虑&#xff0c;因为GPU可以快速完成任意复杂度模型的训练对于推断过程来说&#xff0c;模型应用才是对于速度敏感的场景多数情况下 希望使用尽可能少的能耗完成京可能…...

软件工程课件

软件工程 考点概述软件工程概述能力成度模型能力成熟度模型集成软件过程模型逆向工程![ ](https://img-blog.csdnimg.cn/425cea8190fb4c5ab2bf7be5e2ad990e.png) 考点概述 重点章节 软件工程概述 之前老版教程的&#xff0c;之前考过 能力成度模型 记忆 能力等级 和 特点 能力…...

基于ADS的marx雪崩电路设计-设计实践(射频脉冲源)

基于ADS的marx雪崩电路设计-设计实践&#xff08;射频脉冲源&#xff09; 设计一个ns级别的脉冲源&#xff0c;属于是半路转行的&#xff0c;虽然不了解具体原理但是也可以进行设计。具体的设计理论以及优化方法将在之后进行讨论. 参考文献&#xff1a;基于Marx电路的亚纳秒级…...

X86_64函数调用汇编程序分析

X86_64函数调用汇编程序分析 1 X86_64寄存器使用标准2 对应代码的分析2.1 main函数及其对应的汇编程序2.1.1 main的C代码实现2.1.2 main函数对应汇编及其分析2.1.3 执行完成之后栈的存放情况 2.2 test_fun_a函数及其对应的汇编程序2.2.1 test_fun_a函数的C实现2.2.2 test_fun_a…...

Vue3【Provide/Inject】

前言 自从使用了Provide/Inject代码的组织方式更加灵活了&#xff0c;但是这个灵活性的增加伴随着代码容错性的降低。我相信只要是真的在项目中引入Provide/Inject的同学&#xff0c;一定一定有过或者正在经历下面的状况&#xff1a; 注入名&#xff08;Injection key&#x…...

Go-Python-Java-C-LeetCode高分解法-第四周合集

前言 本题解Go语言部分基于 LeetCode-Go 其他部分基于本人实践学习 个人题解GitHub连接&#xff1a;LeetCode-Go-Python-Java-C Go-Python-Java-C-LeetCode高分解法-第一周合集 Go-Python-Java-C-LeetCode高分解法-第二周合集 Go-Python-Java-C-LeetCode高分解法-第三周合集 本…...

vue路由

一、声明式导航-导航链接 1.需求 实现导航高亮效果 如果使用a标签进行跳转的话&#xff0c;需要给当前跳转的导航加样式&#xff0c;同时要移除上一个a标签的样式&#xff0c;太麻烦&#xff01;&#xff01;&#xff01; 2.解决方案 vue-router 提供了一个全局组件 router…...

最强的AI视频去码图片修复模型:CodeFormer

目录 1 CodeFormer介绍 1.1 CodeFormer解决的问题 1.2 人脸复原的挑战 1.3 方法动机 1.4 模型实现 1.5 实验结果 2 CodeFormer部署与运行 2.1 conda环境安装 2.2 运行环境构建 2.3 模型下载 2.4 运行 2.4.1 人脸复原 ​编辑​编辑 2.4.2 全图片增强 2.4.3 人脸颜色…...

jenkins自动化部署安装

一、准备工作 1、安装jdk # 1、下载准备jdk包(也可以用docker安装) wget ... # 2、直接解压到,无需安装 unzip ...2、安装maven # 1、下载准备maven压缩包 wget ... # 2、直接解压,无需安装 unzip ... # 3、修改setting.xml&#xff0c;修改localRepository和MIRROR镜像地址…...

如何调用Zabbix API获取主机信息

自Zabbix 1.8版本被引进以后&#xff0c;Zabbix API开始扮演着越来越重要的角色&#xff0c;它可以为批量操作、第三方软件集成以及其他应用提供可编程接口。 在运维实践中&#xff0c;Zabbix API还有更多巧妙的应用。 面对规模庞大的监控设备&#xff0c;可能会出现某台机器发…...

批量执行redis命令总结

目录 批量执行redis命令方式1: redis-cli直接执行方式2:通过redis-cli和xargs等命令 批量执行redis命令 方式1: redis-cli直接执行 redis-cli command param redis-cli本身支持单个命令执行省略了连接参数操作的key等相关数据&#xff0c;可以通过线下获取或通过keys scan等命…...

命令行git联网失败,但是实际可以联网

最近下载代码的时候发现总是告诉我连不上github的网页&#xff0c;但是我自己通过浏览器又可以上网&#xff0c;找了半天发现这个方法可以。 记录下这个代理 打开git bash 执行以下命令&#xff1a; git config --global http.proxy http://127.0.0.1:7890 git config --glob…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...

大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...