Vue-3.1缓存组件keep-alive

问题:从首页卡片点到详情页,又点返回,数据重新加载了->希望回到原来的位置

原因:路由跳转后,组件被销毁了,返回回来组件又被重建了,所以数据重新被加载了

解决:利用keep-alive将组件缓存下来

keep-alive是什么

keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

keep-alive是一个抽象组件:它自身不会渲染成一个DOM元素,也不会出现在父组件链中,只是一个容器。

keep-alive的优点

在组件切换过程中把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。

<template><div class="h5-wrapper"><keep-alive><router-view></router-view></keep-alive></div>
</template>

问题:缓存了所有被切换的组件

keep-alive是三个属性

1)include:组件名数组,只有匹配的组件会被缓存

2)exclude:组件名数组,任何匹配的组件都不会被缓存

3)max:最多可以缓存多少组件实例

<template><div class="h5-wrapper" :include="['LayoutPage']"><keep-alive><router-view></router-view></keep-alive></div>
</template>

组件名:name命名的,如果没有配置name,才会找文件名作为组件名

被缓存的组件会多两个生命周期钩子

1)actived:激活时,组件被看到时触发->进入页面时触发

2)deactived:失活时,组件看不见时触发->离开页面时触发

组件缓存了,就不会执行组件的created、mounted、destroyed等钩子,所以提供了actived和deactived

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

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

相关文章

【Vue面试题二十一】、Vue中的过滤器了解吗?过滤器的应用场景有哪些?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;Vue中的过滤器了解吗&am…

Java字符串String

【char】类型代表字符类型&#xff0c;【String】类型代表字符串类型&#xff1b; 1.String类 1.1 声明字符串 在Java中字符串必须包含在一对双引号&#xff08;“ "&#xff09;之内。双引号包含的都是字符串。 声明字符串语法&#xff1a; String str; //声明字符串语…

卡尔曼家族从零解剖-(02)贝叶斯滤波-知其所以然

讲解关于slam一系列文章汇总链接:史上最全slam从零开始&#xff0c;针对于本栏目讲解的 卡尔曼家族从零解剖 链接 :卡尔曼家族从零解剖-(00)目录最新无死角讲解&#xff1a;https://blog.csdn.net/weixin_43013761/article/details/133846882 文末正下方中心提供了本人 联系…

排序算法-选择排序法(SelectionSort)

排序算法-选择排序法&#xff08;SelectionSort&#xff09; 1、说明 选择排序法也是枚举法的应用&#xff0c;就是反复从未排序的数列中取出最小的元素&#xff0c;加入另一个数列中&#xff0c;最后的结果即为已排序的数列。选择排序法可使用两种方式排序&#xff0c;即在所…

【Java集合中各种数据结构的方法汇总】

文章目录 Java集合中各种数据结构的方法汇总数组 ArrayList 、LinkedList链表 LinkedList栈 Stack队列 ArrayQueue、LinkedList哈希表 HashMap堆 PriorityQueue Java集合中各种数据结构的方法汇总 获取大小&#xff1a;fun.size(); 判断是否为空&#xff1a;fun.isEmpty(); …

苍穹外卖(七) Spring Task 完成订单状态定时处理

Spring Task 完成订单状态定时处理, 如处理支付超时订单 Spring Task介绍 Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 应用场景: 信用卡每月还款提醒 火车票售票系统处理未支付订单 入职纪念日为用户发送通知 点外…

操作系统学习笔记4-死锁问题

文章目录 1、死锁逻辑图2、死锁三胞胎3、死锁的原因及必要条件4、死锁处理策略之死锁预防5、死锁处理策略之死锁避免&#xff08;银行家算法&#xff09;6、死锁处理策略之死锁检测与解除 1、死锁逻辑图 2、死锁三胞胎 3、死锁的原因及必要条件 4、死锁处理策略之死锁预防 5、死…

python openai宠物名字生成器

文章目录 OpenAICompletion宠物名字生成器提示词工程 prompt enginering 构建应用程序结果展示 OpenAI OpenAI 已经训练了非常擅长理解和生成文本的领先的语言模型。我们的 API 提供对这些模型的访问&#xff0c;可用于处理几乎任何涉及”语言处理“的任务。 Completion 补全…

18 | 生产环境多数据源的处理方法有哪些

工作中我们时常会遇到跨数据库操作的情况&#xff0c;这时候就需要配置多数据源&#xff0c;那么如何配置呢&#xff1f;常用的方式及其背后的原理支撑是什么呢&#xff1f;我们下面来了解一下。 首先看看两种常见的配置方式&#xff0c;分别为通过多个 Configuration 文件、利…

【完美世界】云曦篇开播时间定档,推迟两周,石昊新形态帅翻,怒斩战王

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 完美世界动画更新最新资讯&#xff0c;石昊在血色平原与云曦重逢并英雄救美。 官方公布了云曦特别篇的先导预告&#xff0c;播出时间推迟了两周。 石昊在特别篇中出现了新形态&#xff0c;以雷帝甲胄为主&…

Leetcode—88.合并两个有序数组【简单】

2023每日刷题&#xff08;一&#xff09; Leetcode—88.合并两个有序数组 题解 因为这两个数组已经排好序&#xff0c;我们可以把两个指针分别放在两个数组的末尾&#xff0c;即 nums1 的m − 1 位和 nums2 的 n − 1 位。每次将较大的那个数字复制到 nums1 的后边&#xff0…

Kafka SASL认证授权(六)全方位性能测试

Kafka SASL认证授权(六)全方位性能测试。 官网地址:https://kafka.apache.org/ 一、场景 线上已经有kafka集群,服务运行稳定。但是因为产品升级,需要对kakfa做安全测试,也就是权限验证。 但是增加权限验证,会不会对性能有影响呢?影响大吗?不知道呀! 因此,本文就此…

【Hyper-V】Windows的Hyper-V管理器创建的虚拟机上怎么复制粘贴文件

在hyper-V 管理器中创建的虚拟机里面&#xff0c;发现它是不能直接复制粘贴文件的&#xff0c;那只能粘贴纯文本内容&#xff0c;也就是模拟输入内容&#xff0c;这是虚拟系统是被隔离的&#xff0c;也带来不便之处&#xff0c;要怎么解决这个限制呢。 例如&#xff0c;打开一…

队列的实现(c语言)

队列也是线性表&#xff0c;也是分为两种的&#xff1a;1、顺序队列 2、链队列 顺序队列 #include <stdio.h> #include <stdlib.h>typedef struct {char *base;int front;int erer;int size; }SqQueue;void initSqQueue(SqQueue *queue,int size){queue->base…

基于静电放电优化的BP神经网络(分类应用) - 附代码

基于静电放电优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于静电放电优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.静电放电优化BP神经网络3.1 BP神经网络参数设置3.2 静电放电算法应用 4.测试结果…

电动力学专题研讨:运动电荷之间的相互作用是否满足牛顿第三定律?

电动力学专题研讨&#xff1a;运动电荷之间的相互作用是否满足牛顿第三定律&#xff1f;​​​​​​​ 两个稳恒电流元之间的相互作用不一定服从牛顿第三定律常见的解释是&#xff1a;稳恒电流元是不能孤立存在的&#xff0c;因此不能得出结论 符号约定 两个运动点电荷之间的力…

vue清除动态路由

项目中往往都是添加动态路由&#xff0c;如何删除已经添加进来的路由往往被忽视&#xff0c;为此这里做一下记录&#xff1a; 查看vue-router路由文档 可以看出 Vue2中是通过matcher来进行重新赋值来进行清空的。 let createRouter () > new Router({mode: history, //ha…

Ubuntu2204安装JDK环境

下载jdk&#xff08;Oracle JDK&#xff09; JDK下载地址&#xff08;JDK诸多版本&#xff09;&#xff1a;Java Archive | Oracle 以JDK8为例&#xff1a;Java Archive Downloads - Java SE 8u211 and later 以上地址需要登录Oracle官网方能下载&#xff0c;安利一个Google…

文心一言 VS 讯飞星火 VS chatgpt (113)-- 算法导论10.2 5题

五、用go语言&#xff0c;使用单向循环链表实现字典操作 INSERT、DELETE 和 SEARCH&#xff0c;并给出所写过程的运行时间。 文心一言&#xff1a; 在Go语言中&#xff0c;我们首先需要定义一个Node结构体来表示单向循环链表的节点&#xff0c;然后再定义一个LinkedList结构体…