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

vue3中RouterView配合KeepAlive实现组件缓存

news 来源：原创 2025/7/5 5:14:52

KeepAlive组件缓存

为什么需要组件缓存
代码展示
缓存效果
为什么不用v-if

为什么需要组件缓存

业务需求：一般是列表页面通过路由跳转到详情页，跳转回来时，需要列表页面展示上次展示的内容

代码展示

App.vue入口

<script setup lang="ts">
import { RouterView, RouterLink } from "vue-router"
</script><template><div><RouterLink to="/">home</RouterLink><RouterLink to="/about">about</RouterLink></div><div><RouterView v-slot="{ Component }">// AboutComponent是组件的名称,vue4组件中通过defineOptions定义<KeepAlive include="AboutComponent"><component :is="Component" /></KeepAlive></RouterView></div>
</template>

home.vue组件

<template><div>home</div>
</template><script setup lang="ts">
import { onMounted } from "vue"
defineOptions({name: "HomeComponent",
})
onMounted(() => {console.log("home onMounted")
})
</script>

about.vue组件

<template><div>about</div>
</template><script setup lang="ts">
import { onMounted } from "vue"
defineOptions({name: "AboutComponent",
})
onMounted(() => {console.log("about onMounted")
})
</script>

缓存效果

1、home和about组件首次加载都会执行onMounted生命周期，但是对about组件进行了缓存，再次切换到about组件，就不会重新初始化，就不会执行onMounted生命周期。
2、keepalive使用include和exclude实现缓存的好处是：只要被缓存的组件首次加载之后，无论在缓存组件之间切换，还是缓存组件与未缓存组件之间切换，都不会重新挂载。

为什么不用v-if

网络上经常使用就是如下代码：

<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

虽然也能实现页面缓存，但是从非缓存组件切换到缓存组件时，会重新挂载缓存组件，从而再次执行onMounted生命周期，只有在两个同样是缓存的组件之间切换才会有实际的缓存效果

vue3中RouterView配合KeepAlive实现组件缓存

KeepAlive组件缓存为什么需要组件缓存代码展示缓存效果为什么不用v-if 为什么需要组件缓存业务需求：一般是列表页面通过路由跳转到详情页，跳转回来时，需要列表页面展示上次展示的内容代码展示 App.vue入口 <script setup lang"…...

编程日记 2025/7/5 5:14:52

NIFI的处理器：ExecuteGroovyScript 2.4.0

ExecuteGroovyScript是常用的处理器之一，用于执行GroovyScript脚本。该脚本负责处理传入的流文件（例如传输到SUCCESS或删除）以及由该脚本创建的任何流文件。如果处理不完整或不正确，会话将被回滚。属性值-失败处理策略 Failure …...

编程日记 2025/7/5 4:36:47

安全可控的AI底座：灯塔大模型应用开发平台全面实现国产信创兼容适配认证

国产信创产品兼容适配认证是为了支持和推动国产信息技术产品和服务的发展而设立的一种质量标准和管理体系。适配认证旨在确保相关产品在安全性、可靠性、兼容性等方面达到一定的标准，以满足政府和关键行业对信息安全和自主可控的需求。北京中烟创新科技有限公司&a…...

编程日记 2025/7/5 4:20:30

.NET外挂系列：5. harmony 中补丁参数的有趣玩法（下）

一：背景 1. 讲故事开局一张表，故事全靠编，为了能够承上启下，先把参数列表放出来。参数名说明__instance访问非静态方法的实例（类似 this）。__result获取/修改返回值，要想修改用 ref。__res…...

编程日记 2025/7/3 14:40:50

Spring Boot 登录实现：JWT 与 Session 全面对比与实战讲解

Spring Boot 登录实现：JWT 与 Session 全面对比与实战讲解 2025.5.21-23:11今天在学习黑马点评时突然发现用的是与苍穹外卖jwt不一样的登录方式-Session，于是就想记录一下这两种方式有什么不同在实际开发中，登录认证是后端最基础也是最重要…...

编程日记 2025/7/5 4:07:49

vscode离线安装组件工具vsix

1.外网下载vsix 网址为：Open VSX Registry 2.输入需要下载的组件 3.下载组件 4.安装 5.选择安装文件 6.安装完成...

编程日记 2025/7/2 18:14:23

Vue大数据量前端性能优化策略

文章目录前言Vue大数据量前端性能优化策略1. 虚拟列表的使用方式及优势2. 列表和图表的懒加载技术3. Web Worker 在图表数据预处理中的应用4. 图表渲染优化技巧5. 分批渲染技术实现方法（如 requestIdleCallback）6. 其他可行的 Vue 层优化策略前言 Vue…...

编程日记 2025/7/2 13:03:07

Hass-Panel - 开源智能家居控制面板

文章目录 ▎项目介绍：预览图▎主要特性安装部署Docker方式正式版Home Assistant Addon方式详细安装方式1. Home Assistant 插件安装（推荐）2. Docker 安装命令功能说明 ：3. Docker Compose 安装升级说明Docker Compose 版本升级功…...

编程日记 2025/7/3 1:21:59

iPaaS集成平台技术选型关注哪些指标？

在数字化转型进程中，企业系统间的数据孤岛问题日益凸显。根据IDC调研，85%的IT决策者将“系统集成效率”列为业务创新的关键瓶颈。iPaaS（集成平台即服务）凭借其敏捷性、低代码特性和智能化能力，已成为企业构建数字生态的…...

编程日记 2025/7/5 5:14:50

JavaScript性能优化实战（14）：跨端JavaScript性能优化

在当今多端开发的时代，JavaScript已经突破了浏览器的界限，广泛应用于移动应用、桌面应用、小程序等各类环境。然而，不同平台的运行时环境存在差异，为JavaScript性能优化带来了新的挑战和思考维度。目录 React Native性能优化最佳实践Electron应用性能优化策略混合应用中J…...

编程日记 2025/6/27 23:23:22

多通道经颅直流电刺激器产品及解决方案特色解析

前记团队在多通道经颅直流电刺激这个技术方向，一路深耕。在服务了不少客户之后，为了方便后续的产品和方案推广。我们弄出来了产品和方案两种形态。标准产品是为了给用户演示以及一些常规的实验使用。方案则是为了满足不同方向的科研用户的需求。这两者相…...

编程日记 2025/7/3 9:47:54

Quasar 使用 Pinia 进行状态管理

官方文档：使用 Pinia 进行状态管理 |Quasar 框架视频教程：quasar框架store-状态管理库pinia介绍_哔哩哔哩_bilibili 使用 Quasar CLI 创建一个新的store quasar new store date --format jsPinia存储模板详解解基本结构解析 import { defineStore,…...

编程日记 2025/6/27 23:26:55

计算机网络--第一章（下）

1.计算机网络的分层结构 1.1 分层结构网络体系结构描述的是，计算机网络有几层，有什么功能，用的什么协议。水平方向的关系， 协议，说的是对等实体间通信需要遵守的规则。用于约束，这个约束的方向是水平的。…...

编程日记 2025/6/27 22:59:38

Veo 3 可以生成视频，并附带配乐

谷歌最新的视频生成 AI 模型 Veo 3 可以创建与其生成的剪辑相配的音频。周二，在谷歌 I/O 2025 开发者大会上，谷歌发布了 Veo 3。该公司声称，这款产品可以生成音效、背景噪音，甚至对话，为其制作的视频增添配乐。谷歌表…...

编程日记 2025/6/27 23:28:59

数据结构核心知识总结：从基础到应用

数据结构核心知识总结：从基础到应用数据结构是计算机科学中组织和存储数据的核心方式，直接影响程序的性能和资源利用率。本文系统梳理常见数据结构及其应用场景，帮助读者构建清晰的知识体系。一、数据结构基础概念数据结构是数据元素之间…...

编程日记 2025/7/2 12:17:15

Flannel后端为UDP模式下，分析数据包的发送方式(二)

发往 10.244.2.5 的数据包最终会经过物理网卡 enp0s3，尽管路由表直接指定通过 flannel.1 发出。以下以 Markdown 格式详细解释为什么会经过 enp0s3，结合 Kubernetes 和 Flannel UDP 模式的背景。问题分析在 Kubernetes 环境中，使用 Flanne…...

编程日记 2025/7/3 5:18:52

超低延迟音视频直播技术的未来发展与创新

引言音视频直播技术正在深刻改变着我们的生活和工作方式，尤其是在教育、医疗、安防、娱乐等行业。无论是全球性的体育赛事、远程医疗、在线教育，还是智慧安防、智能家居等应用场景，都离不开音视频技术的支持。为了应对越来越高的需求&#x…...

编程日记 2025/7/4 5:35:31

改写视频生产流程！快手SketchVideo开源：通过线稿精准控制动态分镜的AI视频生成方案

Sketch Video 的核心特点 Sketch Video 通过手绘生成动画的形式，将复杂的信息以简洁、有趣的方式展现出来。其核心特点包括： 超强吸引力 Sketch Video 的手绘风格赋予了视频一种质朴而真实的质感，与常见的精致特效视频形成鲜明对比。这种独…...

编程日记 2025/7/5 3:47:29

Circle宣布Circle Payments Network主网上线

据 Circle 官方消息，Circle Payments Network 主网正式上线。该网络是一个基于区块链的支付协调协议，允许银行和支付服务提供商使用公共区块链上的 USDC 进行实时结算。 Circle Payments Network 支持企业对企业供应商支付、跨境汇款、资金管理、企业定期…...

编程日记 2025/7/2 19:36:15

【RabbitMQ】记录 InvalidDefinitionException: Java 8 date/time type

目录 1. 添加必要依赖 2. 配置全局序列化方案（推荐） 3. 配置RabbitMQ消息转换器关键点说明 1. 添加必要依赖首先确保项目中包含JSR-310支持模块： <dependency><groupId>com.fasterxml.jackson.datatype</groupId>&l…...

编程日记 2025/7/4 5:51:39

linux 学习之位图（bitmap）数据结构

bitmap 可以高效地表示大量的布尔值，并且在许多情况下可以提供快速的位操作。 1 定义 enum device_state{DOWN,DOEN_DONE,MAILBOX_READY,MAILBOX_PENDING,STATE_BUILD };DECLARE_BITMAP(state,STATE_BUILD)；相当于》u32 state[BITS_TO_LONGS(4)] BIT…...

编程日记 2025/7/2 23:12:05

CNN手写数字识别/全套源码+注释可直接运行

数据集选择： MNIST数据集来自美国国家标准与技术研究所, National Institute of Standards and Technology (NIST)。训练集（training set）由来自250个不同人手写的数字构成，其中50%是高中学生，50%来自人口普查局&…...

编程日记 2025/6/27 23:36:28

基于springboot+vue网页系统的社区义工服务互动平台（源码+论文+讲解+部署+调试+售后）

感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，我会一一回复，希望帮助更多的人。系统背景在社会文明程度不断提升、社区治理需求持续深化的大背景下，社区义工服务作为…...

编程日记 2025/7/5 3:25:21

MBSS-T1：基于模型的特定受试者自监督运动校正方法用于鲁棒心脏 T1 mapping|文献速递-深度学习医疗AI最新文献

Title 题目 MBSS-T1: Model-based subject-specific self-supervised motion correction forrobust cardiac T1 mapping MBSS-T1：基于模型的特定受试者自监督运动校正方法用于鲁棒心脏 T1 mapping 01 文献速递介绍心脏T1定量成像（Quantitative Car…...

编程日记 2025/6/27 22:56:22

Google机器学习实践指南（迭代学习机制解析篇）

🔥 Google机器学习(5)-迭代学习机制解析 Google机器学习实战(5)-深入理解模型训练中的迭代优化过程一、迭代学习概念 ▲ 核心定义： 在训练机器学习模型时，首先对权重和偏差进行初始猜测，然后反复调整这些猜测，直到…...

编程日记 2025/7/3 12:31:45

【时时三省】Python 语言----文件

目录 1，文件打开 2, 文件关闭 3, 文件写入 4, 文件读出 5, 文件定位 6, 文件重命名 7, 复制文件山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 1，文件打开 file = open(file, mode, buffering, encoding, errors, newline, closefd, opener) 2, 文…...

编程日记 2025/6/27 23:10:49

WPF···

设置启动页默认最后一个窗口关闭，程序退出，可以设置修改窗体的icon图标修改项目exe图标双击项目名会看到代码其他在A窗体点击按钮打开B窗体，在B窗体设置WindowStartupLocation=“CenterOwner” 在A窗体的代码设置 B.Owner = this; B.Show(); B窗体生成在A窗体中间…...

编程日记 2025/7/5 1:18:21

架构图 C4 规范简介

架构图 C4 规范简介 C4（Context, Containers, Components, Code）是一种用于软件架构可视化的分层建模方法，由 Simon Brown 提出。它通过四个不同层次的抽象来描述软件系统，适用于不同受众（如业务人员、架构师、开发人…...

编程日记 2025/7/5 4:17:12

运维Web服务器核心知识与实战指南

一、Web服务器基础概述 （一）核心定义与功能 Web服务器是互联网的基础设施，负责存储、处理和传输网页内容，通过HTTP/HTTPS协议与客户端交互。其核心功能包括： 请求处理：监听端口（默认80/443&a…...

编程日记 2025/7/5 4:50:47

免费建站系统是什么？如何选择免费建站系统？

如今，换互联网成为大家生活中必不可少的一部分。对于普通的个人、一些企业、包括一些事业单位，拥有一个高效实用的网站成为展示、宣传、产品介绍的重要途径。但是对于很多用户来说，对于一些没有建站基础的用户来说：建站是一项高门…...

编程日记 2025/6/27 23:37:30

React---day1

React 它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面开发React必须依赖三个库： eact：包含react所必须的核心代码react-dom：react渲染在不同平台所需要的核心代码babel&…...

编程日记 2025/7/4 5:16:07

赋能智慧党建：远眺科技助力党校可视化系统高效落地

项目背景：智慧党校建设的时代召唤在数字化浪潮席卷各行各业的今天，传统党校亦面临转型升级的迫切需求。宁波某地党校，积极响应国家关于推进“智慧党建”的号召，旨在通过引入先进信息技术，打造一个集数据展示、信息…...

编程日记 2025/6/27 22:57:58

解决使用HBuilder X开发时uView组件不生效的问题

1.uni-ui 是一个为 uni-app 开发的 UI 组件库，你可以通过 npm 安装它。在项目的根目录下打开终端（可以通过菜单“工具” > “终端”打开），然后运行以下命令来安装 uni-ui： npm install uview-ui2.安装后&#xff…...

编程日记 2025/7/3 15:26:40

MyHead.jsx console.log(MyHead.jsx); function Head() {return <>hello Head</>; } export default Head;懒加载.jsx // 引入 React 的 useState、lazy 和 Suspense API // lazy 用于懒加载组件，Suspense 用于在加载过程中显示 loading 状态 import …...

编程日记 2025/7/5 5:10:30

网络学习-利用reactor实现http请求（六）

一、实现HTTP请求 1、印象里面，总有人说C/C语言不能实现HTTP请求，其实不然。C/C语言完全可以实现HTTP请求。通过对select,poll,epoll等IO多路复用技术的学习以及reactor模式的学习，完全能够实现HTTP请求。 2、webserver 主要解决两个问题 …...

编程日记 2025/7/4 20:18:14

【东枫科技】usrp rfnoc 开发环境搭建

作者太原市东枫电子科技有限公司 ，代理销售 USRP，Nvidia，等产品与技术支持，培训服务。环境 Ubuntu 20.04 依赖包 sudo apt-get updatesudo apt-get install autoconf automake build-essential ccache cmake cpufrequtils …...

编程日记 2025/7/4 16:06:04

RabbitMQ的其中工作模式介绍以及Java的实现

文章目录前文一、模式介绍1. 简单模式2. 工作队列模式3. 广播模式4. 路由模式5. 通配符模式6. RPC模式7. 发布确认模式二、代码实现1、简单模式2、工作队列模式生产者消费者消费者 1消费者 2 3、广播模式 (Fanout Mode)生产者消费者 4、路由模式 (Direct Mode)生产者消费者 5…...

编程日记 2025/7/5 3:46:47

Docker 镜像打包到本地

保存镜像使用 docker save 命令将镜像保存为一个 tar 文件。命令格式如下： docker save [options] IMAGE [IMAGE...]示例：docker save -o centos.tar centos:latest--output 或 -o：将输出保存到指定的文件中。加载镜像如果需要在其他机器…...

编程日记 2025/6/27 23:14:53

5分钟搭建智能看板：衡石科技自助式BI工具使用教程

在数据驱动的时代，业务人员需要快速将数据转化为洞察，而非依赖IT团队排队开发报表。衡石科技HENGSHI SENSE的自助式BI工具，通过零代码配置、模板化设计、智能分析三大核心能力，让任何人都能在5分钟内搭建专业级数据看板。本文将手…...

编程日记 2025/7/5 1:28:36

安卓开发用到的设计模式（1）创建型模式

安卓开发用到的设计模式（1）创建型模式文章目录安卓开发用到的设计模式（1）创建型模式1. 单例模式（Singleton Pattern）2. 工厂模式（Factory Pattern）3. 抽象工厂模式（Abs…...

编程日记 2025/7/3 6:49:23

Unity3D序列化机制详解

前言 Unity3D的序列化机制是其编辑器与运行时数据管理的核心，理解其工作原理对高效开发至关重要。以下是关键点总结： 对惹，这里有一个游戏开发交流小组，希望大家可以点击进来一起交流一下开发经验呀！ 1. 序列化的作…...

编程日记 2025/7/3 18:48:48

[Harmony]自定义导航栏

1.方案一 CustomNavigationBar import { router } from kit.ArkUI; import { DevicesUtil } from ../utils/DevicesUtil; import { common } from kit.AbilityKit;Component export struct CustomNavigationBar {State private navHeight: number 44State parTitle: string …...

编程日记 2025/7/5 5:00:23

KeepAlive组件缓存

为什么需要组件缓存

代码展示

缓存效果

为什么不用v-if

相关文章：