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

vue中keep-alive的使用

什么是keep-alive?

keep-alive是一个内置组件,用于缓存和管理组件的状态。

当 keep-alive包裹一个组件时,这个组件的状态将会被缓存起来,而不是每次重新渲染。这在多个视图之间切换时特别有用,可以避免重复的创建和销毁组件。

实例:

首先写写一个父页面首页:

<template><div><div class="container"><div v-for="(item,index) in boxes" class="app" @click="assion(index)" :key="index" :class="{actives: active === index}">{{item.name}}</div></div><div><keep-alive><inputs v-if="active === 1"></inputs></keep-alive></div></div></div></template><script>import inputs from '@/components/inputs/inputs.vue'export default {comments:{inputs},data() {return {active:-1,boxes: [{name:'首页'},{name:'子页面'},],};},created() {this.assion(0)},methods:{assion(e){this.active=e}},}
</script><style>.container {width: 100%;height:auto;display: flex;}.app{width: 100%;height: auto;display: flex;justify-content: center;}.actives{color: #c9c9c9;}
</style>

使用方式:在需要的保存状态的组件前面加入keep-alive即可

子页面:

<template><div @click="assion" :style="active">{{text}}</div>
</template><script>
export default {data() {return {text:'我是字体',active:{color:''}};},created() {console.log('我创建了')},destroyed() {console.log('我被销毁了')},methods: {assion(){this.text='我变色了'this.active.color='#c9122e'}}
};
</script>

在不加入keep-alive之前:

我们在子页面生命周期销毁阶段加入了打印的方法:

我们发现在没有加入keep-alive之前,每次切换的时候,子页面组件都会触发销毁时输出的“我被销毁了”,并且点击字体时字体的样式都会重新加载,不会保存上次点击时,字体的状态和样式。

加入keep-alive之后就会保存子页面组件的状态,,让它只会触发组件生命周期的创建阶段,而不会触发销毁阶段,从而保证组件中字体状态和样式得以保留,在次切换到子页面时,字体样式和状态都会保存。

如果不明白生命周期原理的朋友,这里是生命周期原理的原理图:

总结:

keep-alive是vue中内置组件,无须引入或者下载插件,直接可以引用,且可以保存组件的状态不被销毁,从而保证组件中所有的内容状态得以保留。

相关文章:

vue中keep-alive的使用

什么是keep-alive&#xff1f; keep-alive是一个内置组件&#xff0c;用于缓存和管理组件的状态。 当 keep-alive包裹一个组件时&#xff0c;这个组件的状态将会被缓存起来&#xff0c;而不是每次重新渲染。这在多个视图之间切换时特别有用&#xff0c;可以避免重复的创建和销…...

2023年第十二届数学建模国际赛小美赛B题工业表面缺陷检测求解分析

2023年第十二届数学建模国际赛小美赛 B题 工业表面缺陷检测 原题再现&#xff1a; 金属或塑料制品的表面缺陷不仅影响产品的外观&#xff0c;还可能对产品的性能或耐久性造成严重损害。自动表面异常检测已经成为一个有趣而有前景的研究领域&#xff0c;对视觉检测的应用领域有…...

2023全球数字贸易大赛-web3,区块链,诺威信,浪潮云,微众区块链,福建中科星泰,瓴羊区块链,联想-元宇宙,硅基智能-

目录 诺威信B隐私计算平台 浪潮云=星火连-澳优码 HyperChain 产品介绍...

计算机网络一:TCP/IP基础概念和常见面试题

TCP/IP是一种网络通信协议族&#xff0c;它由两个主要的协议构成&#xff1a;TCP&#xff08;传输控制协议&#xff09;和IP&#xff08;网络互联协议&#xff09;。TCP负责数据的可靠传输&#xff0c;而IP则负责数据的路由和转发。 TCP/IP有哪些层次结构&#xff1f;每个层次的…...

图论|684.冗余连接 685. 冗余连接 II

684.冗余连接 题目&#xff1a;树可以看成是一个连通且 无环 的 无向 图。 给定往一棵 n 个节点 (节点值 1&#xff5e;n) 的树中添加一条边后的图。添加的边的两个顶点包含在 1 到 n 中间&#xff0c;且这条附加的边不属于树中已存在的边。图的信息记录于长度为 n 的二维数组 …...

依据小兔鲜项目,总结Javascript数组常用方法

find 在向购物车添加某种规格的商品时&#xff0c;查找购物车列表中是否已经存在该规格的商品 find()方法传入一个回调函数&#xff0c;代表对数组每一项item的校验要求 返回数组中第一个符合条件的元素的值&#xff0c;如果没有则返回undefined const item cartList.value…...

制作飞腾(arm)芯片架构的nexus镜像

nexus官方没有arm架构的镜像&#xff0c;下面介绍一种自己制作镜像的方式 1、事先准备 在一个arm架构机器上安装docker下载nexus的linux版(https://www.sonatype.com/download-oss-sonatype)下载centos的arm架构镜像(docker pull centos-centos8.4.2105)下载arm版本的java8(ht…...

Git 标签管理

前言 标签 tag&#xff0c;就相当于对 某一次的 commit 做一个标识&#xff0c;起了一个别名&#xff0c;例如&#xff1a;在某个项目发布版本的时候&#xff0c;可针对最后一次 commit 起一个别名 v1.0 来标识这一次的commit。tag 的作用&#xff1a;commit id 相对于 tag 是很…...

多级缓存自用

1.什么是多级缓存 传统的缓存策略一般是请求到达Tomcat后,先查询Redis,如果未命中则查询数据库,如图: 存在下面的问题: •请求要经过Tomcat处理,Tomcat的性能成为整个系统的瓶颈 •Redis缓存失效时,会对数据库产生冲击 多级缓存就是充分利用请求处理的每个环节,添加缓…...

1.1卷积的作用

上图解释了1∗1卷积如何适用于尺寸为H∗W∗D的输入层&#xff0c;滤波器大小为1∗1∗D&#xff0c;输出通道的尺寸为H∗W∗1。如果应用n个这样的滤波器&#xff0c;然后组合在一起&#xff0c;得到的输出层大小为H∗W∗n。 1.1∗1卷积的作用 调节通道数 由于 11 卷积并不会改…...

Unity 简单打包脚本

打包脚本 这个打包脚本适用于做demo&#xff0c;脚本放在Editor目录下 using System; using System.Collections; using System.Collections.Generic; using System.IO; using UnityEditor; using UnityEngine;public class BuildAB {[MenuItem("Tools/递归遍历文件夹下…...

基于社区电商的Redis缓存架构-缓存数据库双写、高并发场景下优化

基于社区电商的Redis缓存架构 首先来讲一下 Feed 流的含义&#xff1a; Feed 流指的是当我们进入 APP 之后&#xff0c;APP 要做一个 Feed 行为&#xff0c;即主动的在 APP 内提供各种各样的内容给我们 在电商 APP 首页&#xff0c;不停在首页向下拉&#xff0c;那么每次拉的…...

Python提取PDF表格(基于AUTOSAR_SWS_CANDriver.pdf)

个人学习笔记&#xff0c;仅供参考。 需求&#xff1a;提取AUTOSAR SWS中所有的API接口信息&#xff0c;用于生成C代码。 此处以AUTOSAR_SWS_CANDriver.pdf为例&#xff0c;若需要提取多个SWS文件&#xff0c;遍历各个文件即可。 1.Python包 pdfplumber是一款完全用python开…...

UVa1583生成元(Digit Generator)

题目 如果x加上x的各个数字之和得到y&#xff0c;也就是说x是y的生成元。给出n(1<n<100000)&#xff0c;求最小生成元。无解则输出0。 输入输出样例 输入 3 216 121 2005输出 198 0 1979思路 要想解决这个题目&#xff0c;只需要对每一个输入的值从1开始遍历找到小于…...

【Springboot+vue】如何运行springboot+vue项目

从github 或者 gitee 下载源码后&#xff0c;解压&#xff0c;再从idea打开项目 后端代码处理 这是我在gitee下载下来的源码 打开之后&#xff0c;先处理后端代码 该配置的配置&#xff0c;该部署的部署 比如将sql文件导入数据库 然后去配置文件更改配置 然后启动项目 确保…...

拥抱变化,良心AI工具推荐

文章目录 &#x1f4a5; 简介&#x1f344; 工具介绍&#x1f353; 功能特点&#x1f957; 使用场景&#x1f389; 用户体验&#x1f9e9; 下载地址&#x1f36d; 总结 &#x1f4a5; 简介 我是一名资深程序员&#xff0c;但薪资缺对不起资深两个字&#xff0c;为了生存&#x…...

Tensorflow的日志log记录

if OUTPUT_GRAPH:tf.summary.FileWriter("logs/", sess.graph)自动创建文件夹log...

C-语言每日刷题

目录 [蓝桥杯 2015 省 A] 饮料换购 题目描述 输入格式 输出格式 输入输出样例 # [蓝桥杯 2023 省 A] 平方差 题目描述 输入格式 输出格式 输入输出样例 说明/提示 【样例说明】 [NOIP2001 普及组] 数的计算 题目描述 输入格式 输出格式 输入输出样例 说明/提示 样例 1 解释 数据…...

十五届海峡两岸电视主持新秀大会竞赛流程

海峡两岸电视主持新秀会是两岸电视媒体共同举办的一项活动&#xff0c;旨在为两岸年轻的电视主持人提供一个展示才华的舞台&#xff0c;促进两岸文化交流和青年交流。本届新秀会是第十二届海峡两岸电视艺术节的重要活动之一。本次竞赛赛制流程如下&#xff1a; &#xff08;1&…...

安全行业招聘信息汇总

1. 阿里巴巴-淘天集团-安全部 社招岗位&#xff1a;Java开发 招聘层级&#xff1a;P5-P6 工作年限&#xff1a;本科毕业1-3年&#xff0c;硕士毕业1-2年 base地点&#xff1a;杭州 职位描述 负责淘天安全部风控基础标签平台0到1能力建设及产品规划和落地。负责标签应用的产品…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...