探索 Vue3 (四) keep-alive缓存组件

news2024/11/13 9:10:20

 keep-alive 的作用

官网介绍:KeepAlive | Vue.js

keep-alive为抽象组件,主要用于缓存内部组件数据状态。可以将组件缓存起来并在需要时重新使用,而不是每次重新创建。这可以提高应用的性能和用户体验,特别是在需要频繁切换组件时。 

简单使用:

组件A

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <p>Current component: A</p>
  <span>count: {{ count }}</span>
  <button @click="count++">+</button>
</template>

组件B

<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

<template>
  <p>Current component: B</p>
  <span>Message is: {{ msg }}</span>
  <input v-model="msg">
</template>

 项目中使用:

<script setup>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'

const current = shallowRef(CompA)
</script>

<template>
  <div class="demo">
    <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current" :value="CompB" /> B</label>
    <KeepAlive>
      <component :is="current"></component>
    </KeepAlive>
  </div>
</template>

运行之后可以看到切换组件对数据没有影响。

包含/排除

<KeepAlive> 默认会缓存内部的所有组件实例,但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式,或是包含这两种类型的一个数组:

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

它会根据组件的 name 选项进行匹配,所以组件如果想要条件性地被 KeepAlive 缓存,就必须显式声明一个 name 选项。

这样子的话就只有CompA会生效,CompB没有include不会生效

最大缓存实例数​

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存:如果缓存的实例数量即将超过指定的那个最大数量,则最久没有被访问的缓存实例将被销毁,以便为新的实例腾出空间。

template

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

缓存实例的生命周期

当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时,它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时,它将重新被激活

一个持续存在的组件可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子:

vue

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

请注意:

  • onActivated 在组件挂载时也会调用,并且 onDeactivated 在组件卸载时也会调用。

  • 这两个钩子不仅适用于 <KeepAlive> 缓存的根组件,也适用于缓存树中的后代组件。

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

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

相关文章

java实现回文数算法

判断一个数是否为回文数可以使用以下算法&#xff1a; 将数字转化为字符串&#xff1b;初始化左右两个指针&#xff0c;分别指向字符串的首尾&#xff1b;循环比较左右指针指向的字符&#xff0c;如果相等则继续比较&#xff0c;直到左右指针相遇或者发现不相等的字符为止&…

使用凌鲨辅助学习软件研发

对于新入门的软件研发人员来说&#xff0c;Git和研发环境的搭建确实是一个不小的挑战。Git是一个分布式版本控制系统&#xff0c;用于跟踪代码的更改和协作&#xff0c;而研发环境则是一个专门用于开发和测试应用程序的环境。 在Git方面&#xff0c;新入门的软件研发人员需要了…

升级ChatGPT4的方法

1. 主要流程&#xff1a;先申请一个美区apple id&#xff0c;然后往这个apple id充钱&#xff0c;用这个apple id的钱订阅chatgpt 2. 细节&#xff1a; &#xff08;1&#xff09;申请美区apple id&#xff1a; 其实这一步很简单&#xff08;曾经以为比较复杂&#xff09;&…

23年12月AI烟火识别系统应用案例-北京梅兰芳故居防火系统

AI烟火识别智能视频分析系统在文化遗产保护领域的应用&#xff0c;尤其是在梅兰芳故居防火系统的部署&#xff0c;是现代科技与传统文化保护结合的典范。这篇文章将详细介绍富维烟火识别系统的设计、实施及其在23年12月在北京梅兰芳故居中的应用。 背景介绍 ● 梅兰芳故居的重要…

php-使用wangeditor实现富文本(完成图片上传)-npm

官网参考连接&#xff1a;快速开始 | wangEditor 样式&#xff1a; 一、新建一个临时文件夹test1和一个文件夹wangeditor 临时文件夹test1&#xff1a;临时存放通过npm下载的文件文件夹wangeditor&#xff1a;用于存放在临时文件夹test1拷贝的css和js 二、安装 editor 在确保有…

mac电池最大充电限制 AlDente Pro中文 for Mac

热保护&#xff1a;在电池温度较高时为电池充电会导致电池老化更快。启用热保护后&#xff0c;当电池温度过高时&#xff0c;充电将自动停止。 航行模式&#xff1a;通常情况下&#xff0c;即使激活了最大电池充电&#xff0c;您的 MacBooks 电池也会始终稍微充电和放电以保持所…

【yolov8系列】 yolov8 目标检测的模型剪枝

前言 最近在实现yolov8的剪枝&#xff0c;所以有找相关的工作作为参考&#xff0c;用以完成该项工作。 先细读了 Torch-Pruning&#xff0c;个人简单记录了下 【剪枝】torch-pruning的基本使用&#xff0c;有框架完成的对网络所有结构都自适应剪枝是最佳的&#xff0c;但这里没…

快速从图中提取曲线坐标数据的在线工具WebPlotDigitizer

快速从图中提取曲线坐标数据的在线工具WebPlotDigitizer 1 介绍2 WebPlotDigitizer在线版的使用2.1 上传图像2.2 点击横纵坐标点&#xff1a;2.3 选择曲线 3 查看数据参考 1 介绍 写论文时要对比别人曲线图、点图、柱形图的数据&#xff0c;但是只有图没有原始数据怎么办&…

JVM调优小结

JVM常见工具介绍 jinfo(查看配置信息) 查看Java应用程序配置参数或者JVM系统属性&#xff0c;相关命令详情我们可以使用-help或者man命令查看&#xff0c;如下所示: [rootxxxxxtmp]# jinfo -help Usage:jinfo [option] <pid>(to connect to running process)jinfo [op…

《信息安全工程师教材》-蒋建春、信息安全完全参考手册-Mark Rhodes Ousley、CISSP官方学习指南第九版、ISO27002学习

文章目录 介绍关系学习顺序重复内容学习方法建议学习时间可能重合的部分更详细的学习计划 介绍 《信息安全工程师教材》- 蒋建春&#xff1a;这本教材可能是针对中国地区信息安全工程师的认证考试而编写的&#xff0c;它可能会涵盖信息安全的基本概念、技术和政策&#xff0c;特…

Ubuntu 常用命令之 gzip 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 gzip 是一个在 Linux 和 Unix 系统中常用的文件压缩工具。它的名字来源于 GNU zip&#xff0c;作为一个自由软件&#xff0c;它是 GNU 项目的一部分。gzip 命令通常用于压缩文件&#xff0c;以节省磁盘空间&#xff0c;或者减小文…

Python教程:对于初学者,几个易懂的装饰器示例用法

装饰器是Python中的一个高级功能&#xff0c;它可以用来扩展或修改一个函数或方法的功能&#xff0c;而不需要修改其原始代码。装饰器本质上是一个函数&#xff0c;它接受一个函数作为参数&#xff0c;并返回一个新的函数对象。 装饰器通常用于添加与函数功能无关的额外功能&a…

泛微OA C# 调用 WebAPI功能实现

泛微OA C# 调用 WebAPI功能实现 OA 在线文档地址1. 创建流程字段参数 mainData 简单说明字段表明细表2. 接口封装2.1 接口初始化2.2 接口注册2.3 获取Token2.4 拼装 Headers2.5 常用工作流方法2.5.1 创建2.5.2 删除2.5.3 撤回2.5.4 退回3. 接口调用OA 在线文档地址 Token认证 …

【C#】.net core 6.0 通过依赖注入注册和使用上下文服务

给自己一个目标&#xff0c;然后坚持一段时间&#xff0c;总会有收获和感悟&#xff01; 请求上下文是指在 Web 应用程序中处理请求时&#xff0c;包含有关当前请求的各种信息的对象。这些信息包括请求的头部、身体、查询字符串、路由数据、用户身份验证信息以及其他与请求相关…

Windows如何安装使用TortoiseSVN客户端并实现公网访问本地SVN Server

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统&#xff0c;它与Apache Subversion&#xff08;SVN&#xff09;集成在一起&#xff0c;提供了一个用户友好的界面&#xff0c;方便用…

一文吃透String

1.概览 String 被声明为 final&#xff0c;因此它不可被继承。 内部使用 char 数组存储数据&#xff0c;该数组被声明为 final&#xff0c;这意味着 value 数组初始化之后就不能再引用其它数组。并且 String 内部没有改变 value 数组的方法&#xff0c;因此可以保证 String 不…

苏宁易购商品详情API:电商实时数据

一、引言 在当前的电商行业中&#xff0c;数据是最为宝贵的资源之一。如何获取实时、准确的数据&#xff0c;对于电商业务的运营和优化至关重要。作为中国领先的电商平台之一&#xff0c;苏宁易购提供了丰富的API接口&#xff0c;其中包括商品详情API&#xff0c;以便第三方开…

AI文生图功能试用

使用边界AICHAT中的文生图功能&#xff0c;使用下面的文本描述&#xff1a; 春天&#xff0c;在大明湖畔&#xff0c;一个中国南方的&#xff0c;女人&#xff0c;皮肤白皙&#xff0c;长发飘逸&#xff0c;明亮眼睛&#xff0c;五官俊俏&#xff0c;在静静的临摹&#xff0c;…

【扩散模型】8、DALL-E2 | 借助 CLIP 的图文对齐能力来实现文本到图像的生成

文章目录 一、背景二、方法2.1 Decoder2.2 Prior 三、图像控制3.1 Variations3.2 Interpolations3.3 Text Diffs 四、探索 CLIP 的潜在空间五、文本到图像的生成5.1 先验的重要性5.2 人类评价5.3 多样性和保真性的平衡5.3 在 COCO 上对比 论文&#xff1a;DALLE.2 代码&#x…

PyQt6 QColorDialog颜色对话框控件

锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计50条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话版…