keep-alive的使用

Vue中的<keep-alive>组件是前端开发中的一个宝藏功能,它如同时光胶囊般保留组件的状态,让组件在切换时仿佛按下暂停键,再次回来时还能继续播放,极大地优化了用户体验和性能。🚀✨

作用

  • 状态保留:当包裹在<keep-alive>中的组件被切换出去时,它的状态不会被销毁,而是被缓存起来。这意味着组件的data和计算属性等状态信息会被保存在内存中,下次再访问该组件时,可以直接复用这些缓存状态,而不需要重新初始化和渲染DOM树,提高了页面切换的效率。📚💨

  • 生命周期钩子:使用<keep-alive>后,被缓存的组件会有特定的生命周期钩子函数执行,比如activated会在组件被重新激活时调用,而deactivated则在组件被缓存时调用,这让开发者有机会在组件切换时执行特定的操作,比如恢复或暂停定时器等。🔧👀

具体用法

基本用法

直接将<keep-alive>作为包裹组件,内部放置可以被缓存的组件:

<keep-alive><component :is="currentComponent"></component>
</keep-alive>

在这个例子中,currentComponent是一个动态绑定的变量,根据它的值变化,内部的组件会切换,但因为有了<keep-alive>,之前显示过的组件状态会被保留。

配置缓存策略

Vue允许你为不同的组件指定不同的缓存策略,通过:include:exclude:max属性:

  • :include - 只缓存指定名称的组件列表。

<keep-alive include="ComponentA,ComponentB"><component :is="currentComponent"></component>
</keep-alive>

:exclude - 除了指定名称的组件外,其他都缓存。

<keep-alive exclude="ComponentC"><component :is="currentComponent"></component>
</keep-alive>

:max - 最大缓存数量限制,当达到最大数量时,最早进入缓存的组件将被移除以腾出空间。

<keep-alive :max="3"><component :is="currentComponent"></component>
</keep-alive>
使用生命周期钩子

在组件内部,可以利用activateddeactivated钩子来处理组件的激活与停用逻辑:

export default {name: 'MyComponent',activated() {console.log('组件被激活了,可以在这里恢复数据或执行其他操作');✨},deactivated() {console.log('组件即将被缓存,可以在这里清理资源或暂停某些操作');💤}
}
  • 注意,<keep-alive>并不会阻止组件的销毁和重建,只是在一定程度上复用了已创建的实例。因此,对于数据量特别大或者包含大量复杂计算的组件,使用时要权衡是否真的需要缓存。
  • 当使用路由时,Vue Router默认已经对路由视图进行了<keep-alive>处理,你可以通过路由元信息自定义每个路由的缓存策略。

为了更好地理解<keep-alive>的使用,让我们通过一个简单的Vue应用示例来演示其具体应用。在这个例子中,我们将创建一个简单的Tab切换组件,其中包含两个可切换的子组件,使用<keep-alive>来缓存这两个组件的状态。

项目结构

首先,假设你的Vue项目已经设置好,下面是涉及到的两个组件文件:

  1. Tab1.vue - 第一个可缓存的组件
  2. Tab2.vue - 第二个可缓存的组件
  3. App.vue - 应用的主组件,包含<keep-alive>和切换逻辑

Tab1.vue

<template><div><h2>我是Tab 1组件</h2><p>输入一些文本:<input v-model="message" /></p><p>你输入的是:{{ message }}</p></div>
</template><script>
export default {data() {return {message: ''};},activated() {console.log('Tab1被激活了');},deactivated() {console.log('Tab1被缓存了');}
};
</script>

Tab2.vue

内容与Tab1.vue相似,只是显示信息不同,用于展示另一个组件的内容。

<template><div><h2>我是Tab 2组件</h2><p>这里是Tab 2的内容...</p></div>
</template><script>
export default {activated() {console.log('Tab2被激活了');},deactivated() {console.log('Tab2被缓存了');}
};
</script>

App.vue

主组件,使用v-ifv-else控制显示哪个组件,并使用<keep-alive>包裹以实现状态缓存。

<template><div id="app"><button @click="switchTab('Tab1')">切换到Tab 1</button><button @click="switchTab('Tab2')">切换到Tab 2</button><keep-alive><component :is="currentTab"></component></keep-alive></div>
</template><script>
import Tab1 from './components/Tab1.vue';
import Tab2 from './components/Tab2.vue';export default {components: {Tab1,Tab2},data() {return {currentTab: 'Tab1'};},methods: {switchTab(tabName) {this.currentTab = tabName;}}
};
</script>

在这个例子中,当你在Tab1中输入一些文本然后切换到Tab2,再回到Tab1时,之前输入的文本仍然存在,这是因为<keep-alive>保留了Tab1组件的状态。同时,通过浏览器的控制台,你还可以看到activateddeactivated钩子函数的调用日志,进一步验证了组件的激活与缓存过程。🎯🔍

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

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

相关文章

枣庄高防服务器采用了什么样的高性能硬件?

枣庄高防服务器采用了什么样的高性能硬件&#xff1f;这是许多企业、开发者和网站运营者关心的问题。高性能硬件对于服务器的稳定性、响应速度以及安全性都至关重要。选择合适的高性能硬件可以确保服务器在面对大流量、DDoS攻击等情况下能够稳定运行&#xff0c;为用户提供良好…

AI多模态「六边形战士」,原创音乐、1分钟百页PPT、抖音爆款……

2024年AI行业最大的看点是什么&#xff1f; 那一定是多模态AI应用。 大模型发展到今天这个阶段&#xff0c;文本处理已经是各家大模型的必备技能了&#xff0c;对音频、视觉等多模态的理解和应用才是下一个阶段大模型比拼的赛道。 3.5研究测试&#xff1a;hujiaoai.cn 4研究测…

Golang单元测试

文章目录 传统测试方法基本介绍主要缺点 单元测试基本介绍测试函数基准测试示例函数 传统测试方法 基本介绍 基本介绍 代码测试是软件开发中的一项重要实践&#xff0c;用于验证代码的正确性、可靠性和预期行为。通过代码测试&#xff0c;开发者可以发现和修复潜在的错误、确保…

Python实现数据可视化效果图总结

一、JSON格式 JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据。 JSON本质上是一个带有特定格式的字符串 Json格式 JSON数据格式在Python中可以是字典、又可以是列表中嵌套着字典的格式。 Pyhton数据和Json数据相互转化 二、pyecharts模块 如果想…

Shell脚本语言学习1

shell解析器&#xff1a;指定脚本使用的shell解释器 #!/bin/bash 执行脚本&#xff1a;bash ./hello.sh 或者 sh ./hello.sh 必须加./ 给文件赋权&#xff1a;chown x hello.sh 就可以./hello.sh 扩展方案&#xff1a;source hello.sh 也可以执行。 . hello.sh也可以 子bash和当…

[BT]小迪安全2023学习笔记(第30天:Web攻防-SQL带外注入)

第30天 堆叠注入 支持数据库&#xff1a;MySQL、MsSQL、PostgreSQL 数据库后台能够执行堆叠操作&#xff0c;但不一定在注入点就能够实现堆叠操作&#xff0c;因为这和网站处理方式有关 二次注入 注入过程&#xff1a;比如在用户注册或者修改用户信息时可以在某一个存在注入…

二叉排序树的创建

二叉排序树就是节点经过排序构建起的二叉树&#xff0c;其有以下性质&#xff1a; 1. 若它的左子树不为空&#xff0c;则左子树上所有节点的值均小于它的根节点的值。 2. 若它的右子树不为空&#xff0c;则右子树上所有节点的值均大于它的根节点的值。 3. 它的左、右子树也分…

Springboot零星知识点1

1、请求路径的组成 2、多个环境配置文件 3、对 自定义的属性 增加文字描述&#xff0c;而且IDEA不会警告 4、读取属性值的两种方式 5、东东

【linux】docker下nextcloud安装人脸识别插件

一、插件源码地址&#xff1a; GitCode - 开发者的代码家园 二、插件官网地址&#xff1a; Releases - Face Recognition - Apps - App Store - Nextcloud 三、插件安装教程&#xff1a; 1、查看本地nextcloud版本号 http://ipAddress:8080/settings/admin/overview 2、找…

【博客714】golang使用mmap来优化gc

golang使用mmap来优化gc&#xff1a; 背景 需要处理的对象非常多时&#xff0c;比如&#xff1a;时序数据库victoriametrics源码中&#xff0c;利用了mmap申请内存并自己维护&#xff0c;从而避免过多gc影响性能&#xff0c;因为频繁申请和释放堆对象会降低性能 参考victoriam…

PaddleClas 指定gpu

在使用PaddleClas进行模型训练或预测时&#xff0c;如果您想要指定使用特定的GPU设备&#xff0c;可以通过CUDA_VISIBLE_DEVICES环境变量来设置。 在命令行中设置GPU的方法如下&#xff1a; # 指定第0号GPU export CUDA_VISIBLE_DEVICES0 # 之后运行PaddleClas的命令&#xf…

深入解析:如何高效地更新Python字典

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、修改字典中的值 三、向字典中添加键值对 四、更新字典的两种方法总结 五、…

Java进阶学习笔记16——接口的综合案例

接口的综合案例&#xff1a; 接口的应用案例&#xff1a;班级学生信息管理模块的开发 需求&#xff1a; 请设计一个班级学生的信息管理模块&#xff1a;学生的数据有&#xff1a;姓名、性别、成绩。 功能1&#xff1a; 要求打印出全班学生的信息&#xff1b;功能2&#xff…

天线增益越高不一定越好

在以下应用场景下&#xff0c;过高的天线增益会导致性能下降&#xff1a;   城市环境或建筑物周围&#xff1a;高增益天线容易受到其他信号的干扰&#xff0c;在城市环境下或者在某些建筑物周围使用时&#xff0c;可能会被其他无线网络和其他电磁设备的信号干扰&#xff0c;…

浏览器的一些功能

1.改主页面 点浏览器右上角的三个点也就是一个... 点了设置 你可以在这里改它的颜色 还有页面 一些有意思的网站: sandspiel像素风格游戏 趣味互动游戏&#xff1a;请画一个小人 (webhek.com)​​​​​​ 2018 - makemepulse解压游戏 Layered Water (vlucendo.com)水模…

【C++项目】实时聊天的在线匹配五子棋对战游戏

目录 项目介绍 开发环境 核心技术 项目前置知识点介绍 Websocketpp 1. WebSocket基本认识 2. WebSocket协议切换原理解析 3. WebSocket报文格式 4. Websocketpp介绍 5. 搭建一个简单WebSocket服务器 JsonCpp 1. Json格式的基本认识 2. JsonCpp介绍 3. 序列化与反序…

[js] 中文编码解码encodeURI,decodeURI

encodeURI (URIstring)// 编码decodeURI (URIstring)  // 解码参考&#xff1a; JS 中的编码和解码&#xff08;encode和decode&#xff09;

CSS3盒模型与布局

盒模型与布局 居中对齐 文本居中对齐 水平居中 使用 text-align: center; 属性在块级元素内使内联元素(如文本、图片等)水平居中。 .parent {text-align: center; }垂直居中 使用 line-height 设置为与容器高度相同的值,实现单行文本的垂直居中。 .parent {height: 100…

基于地理坐标的高阶几何编辑工具算法(3)——相离面吸附

文章目录 工具步骤应用场景算法输入算法输出算法示意图算法原理 工具步骤 点击面&#xff0c;点击“相离面吸附”工具&#xff0c;绘制一个面&#xff0c;双击结束后&#xff0c;与所有相交的面进行吸附 应用场景 为了让相离的两个几何面在空间上相邻&#xff0c;使用该工具…

ROS+UBUNTU开发常用指令

ROS部分 一、功能包编译 1.1、单独编译指定的功能包 catkin_make -DCATKIN_WHITELIST_PACKAGES"需要单独编译的包名"1.2、再次回到编译所有功能包 catkin_make -DCATKIN_WHITELIST_PACKAGES""ubuntu部分 一、清空 Bash 历史记录文件&#xff1a; ~/.b…