Skip to main content

moregeek program

目的:介于产品非要我实现进入详情页出来页面筛选项不变这个需求~于是我学习了下_wx62ad939987164的博客-多极客编程


一、介绍

keepalive是Vue的内置组件,作用是将组件缓存在内存当中,防止重复渲染DOM,属于消耗内存获取速度。常用的用法是将组件或者路由缓存,现有的用法vue2.x与vue3.x有部分差别。以下主要将keepaliev在vue3.0中的用法。

二、使用

通常我们可以配置整个页面缓存或只让特定的某个组件保持缓存信息,配置了keepalive的路由或者组件,只会在页面初始化的时候执行created->mounted生命周期,第二次及以后再进入该页面将不会执行改生命周期,而是会去读取缓存信息。

1、router配置缓存

1)第一步:配置App.vue

  • vue2.x与vue3.0的App.vue配置有差异,在App.vue配置信息如下:
  • vue2.x中,router-view可整个放入keepalive中,如下:
<template>
<!-- vue2.x配置 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
</template>
复制代码
  • vue3.0的App.vue配置方法如下:
<template>
<!-- vue3.0配置 -->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view>
</template>
复制代码

这里component是vue中的特殊组件,:is是用来绑定指定组件,这里是与路由对应的页面绑定。

2)第二步:添加meta属性

在对应的路由上添加meta属性来设置页面是否要使用缓存,如下:

{
path: "/keepAliveTest",
name: "keepAliveTest",
meta: {
keepAlive: true //设置页面是否需要使用缓存
},
component: () => import("@/views/keepAliveTest/index.vue")
},
复制代码

到此即可实现页面的简单缓存,但是有些场景需要做复杂处理,比如说页面部分信息不需要读缓存,每次进入都需要进行处理,这个时候我们就可以使用activated生命周期来解决页面部分刷新问题。

3)实现页面部分刷新

先了解vue的生命周期,被keepAlive包裹的组件和页面,页面进入时执行的生命周期为:created->mounted->activated; 其中created->mounted是页面第一次进入才会执行,activated生命周期在页面每次进入都会执行,特属于keepAlive的一个生命周期,所以我们把页面每次进来要进行的操作放入该生命周期即可。 如下代码:

activated() {
// 页面每次进入将手机动态验证码置为空
this.$refs.mobPwdCode.inputValue = '';
},
复制代码

实现的功能是用户每次进入将动态验证码设为空,实现此功能也可以用其他方式,比如说将该组件放缓存外(参见2、component配置缓存)。

4)动态设置路由keepAlive属性

有些时候我们用完了keepalive缓存之后,想让页面不再保持缓存,或者设置下一个页面keepalive,也这个时候我们可以改变meta的keepAlive值来去除页面缓存,使用beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave,使用方式如下:

// to为即将跳转的路由,from为上一个页面路由
beforeRouteLeave(to, from,+ next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false;
next();
}
复制代码

2、组件配置缓存

1)使用场景

通常我们会对vue的一个页面进行缓存,然而有些时候我们仅需要缓存页面的某一个组件,或是在使用动态组件compnent进行组件切换时需要对组件进行缓存。

2)缓存页面指定组件

当用于App.vue时,所有的路由对应的页面为项目所对应的组件,使用方法如下:
在keep-alive组件上使用include或exclude属性,如下:使用include
代表将缓存name为testKA的组件,

// APP.vue文件,将页面作为组件缓存
<router-view v-slot="{ Component }">
<keep-alive include="testKA">
<component :is="Component"/>
</keep-alive>
</router-view>
复制代码

在router对应的页面中,需要设置name属性,如下:

export default {
name:'testKA',// keep-alive中include属性匹配组件name
data() {return {}},
activated() {
// keepalive缓存的页面每次进入都会进行的生命周期
},
}

复制代码

此外,include用法还有如下:

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>

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

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
复制代码

exclude用法与include用法相同,代表不被缓存的组件。此外,keep-alive还有一个max属性,代表缓存组件最大数量,一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
复制代码

当用于某个页面进行组件切换时,用法与缓存路由相同,不过只是将页面降级为一个组件,父组件由App.vue降级为对应路由页面。

3)总结

在实战过程中,发现keepalive缓存组件时,不能跨级使用;,比如在App.vue中使用include属性进行name="a"匹配时,只能匹配缓存name为a的子组件(路由页面),而不能缓存name为"a"的孙子组件(子页面引的组件)。若想缓存孙子组件,可以将整个子组件缓存,或者在子组件里再使用keepalive。关于keepalive使用说明文档,可去官网学习:​​v3.vuejs.org/guide/compo…​

©著作权归作者所有:来自51CTO博客作者草长莺飞飞满天的原创作品,请联系作者获取转载授权,否则将追究法律责任
目的:介于产品非要我实现进入详情页出来页面筛选项不变这个需求~于是我学习了下
https://blog.51cto.com/u_15689678/5394719

oracle 19c软件安装包和安装教程_乐乐软件管家的博客-多极客编程

Oracle 19c软件简介:Oracle 19c是一款非常好用的数据库软件,拥有强大的数据库管理功能,而且稳定、安全,让用户可以放心的使用这款软件来管理数据库,让用户体验最轻松的数据库管理方式。Oracle 19c软件下载:[软件全称]:Oracle 19c[软件大小]:2.89G[软件语言]:中文[安装环境]:Win7/Win8/Win10/Win11​[安装前工作]:安装过程须断网和关闭杀毒

逆向调试入门-设置api函数断点_最爱大苹果的博客-多极客编程

API函数:英文全称Application Programming Interface,翻译为“应用程序编程接口”。 是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。使用工具:Ollydebug:一跨调试工具。Stud_PE:一款查看PE头文件的工具exeinfope:一款查编写语言的工具TraceMe软件:一个

Navicat 16 for MySQL软件安装包和安装教程-多极客编程

Navicat 16 for MySQL软件简介:Navicat 16 for MySQL是一款针对MySQL数据库而开发的第三方mysql管理工具,能够同时连接 MySQL 和 MariaDB 数据库,并与 Amazon RDS、Amazon Aurora、Oracle Cloud、Microsoft Azure、阿里云、腾讯云和华为云等云数据库兼容,支持无缝数据迁移、简单的SQL编辑、智能数据

客快物流大数据项目(二十一):docker环境初始化_大数据lansonli的博客-多极客编程

Docker环境初始化一、下载oracle11g_centos7镜像操作步骤说明1查找oracle11g_centos镜像docker search oracle11g2拉取kungkk/oracle11g_centos7镜像docker pull kungkk/oracle11g_centos73确认是否拉取镜像成功二、启动oracle11g_centos7容器操作步骤说明1创建容器docker

rtos基础之线程间同步_物联网工程师的博客-多极客编程

线程间同步​​引言​​​​基本概念​​​​同步和互斥​​​​临界区​​​​信号量​​​​信号量的使用场合​​​​线程同步​​​​中断与线程的同步​​​​资源计数​​​​生产者消费者例子​​​​互斥量​​​​互斥量工作机制​​​​互斥量的优先级继承机制​​​​互斥量的使用场合​​​​事件集​​​​事件集工作机制​​​​事件集的使用场合​​​​后续​​ 引言在多线程实时系统中,一项工作的完成往往可以

【服务器数据恢复】vmfs文件系统raid5硬盘故障的数据恢复案例_sun的博客-多极客编程

服务器数据恢复环境: VMware ESX服务器; 服务器文件系统:VMFS; 8块硬盘组建RAID5,4号盘是热备盘。 服务器故障: 服务器两块硬盘指示灯亮黄色,机房管理员检测后初步判断这2块盘出现物理故障,序列号无法读取,在SAS扩展卡上无法识别。管理员联系我们数据恢复中心对raid进行数据恢复。 服务器数据恢复过程: 1、硬盘物理故障修复。 硬件工程师拿到所有服务器硬盘后首先检查了raid中

如何使用 php 实现网页交互_wx6123051953ddd的博客-多极客编程

我们经常说的 PHP 其实是 Hypertext Preprocessor(超文本预处理器)的缩写。PHP 其实是一款嵌在 HTML 文件中,同时基于网络的开放源码服务器端脚本语言。一般上,我们使用 PHP 语言编写需要与数据库进行交互的网页。前置课程作为 HTML 网页编程的一份子,学习 PHP 前需要有基本的 HTML、CSS 甚至 JS 知识。如果之前没有相关的基础,可以查看一些关于网页编程

网站服务器如何选配-多极客编程

服务器对一个网站来说是非常重要的,一个好的服务器可以让网站在后期的运行中更加的稳定、安全及访问速度快,这样可以很好的帮助网站后期的优化推广。服务器的种类及配置都比较多,这该怎么选呢?市场上服务器厂商都挺多,我们熟知的可能也就是阿里云,腾讯云,华为云,百度云等,其实服务器的配置这些对于新手来说不必过多担心,我们购买服务器的用途也就是测试测试自己开发的项目,所以新手推荐轻量级的服务器。而且如果是新用户

PHP框架推荐-多极客编程

几乎80%的网站建设都是用的PHP,那么PHP你知道的框架有哪些?(图源网络)在php中,我们最常用的框架有七个,分别是Yii2、Laravel、Yaf、Thinkphp、Code Igniter、Zend Framework以及CakePHP1、Laravel​于2011年推出,现已成为世界上最流行的免费、开源PHP框架。Laravel简化了开发过程,简化了常见的任务,比如路由、会话、缓存和身份

​​moment.js的方法总结​​_wx62ad939987164的博客-多极客编程

 总结一个非常实用的日期工具类moment.js,日期获取,格式化等。 引入moment//import 方式import moment from 'moment';设定moment区域为中国​​​​//require 方式require('moment/locale/zh-cn')moment.locale('zh-cn'); //import 方式import 'moment/locale/z

怎么理解 js 基本引用类型?_安东尼漫长的技术岁月的博客-多极客编程

JavaScript 高级程序设计第 4 版(后简称高程4),相较于第 3 版,增加了 ES6 至 ES10 的全新内容,删除了旧版过时的内容,并在原有基础上充实了更加翔实的内容。中文译版于 2020 年发售,妥妥的“新鲜出炉”,你要是问本瓜:当今学 JavaScript 哪家强,我只能说:红宝书第 4 版最在行。​于是乎,借着更文契机,本瓜将开启一个小系列,带你重看一遍高级程序设计4(先前只是跳

#yyds干货盘点# 【react工作记录五十七】添加按钮的两种方式_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语项目中添加按钮的两种方式编辑方案1 if判断const buttonTableList = [];if (status == '116237257909008888811