技术标签： 项目实战经验 vue 前端 缓存 javascript
vue 【缓存】方案，保留组件状态或避免重新渲染，能够缓存当前页面的所有数据
<keep-alive>
<component :is="view"></component>
</keep-alive>
<keep-alive>
<router-view></router-view>
</keep-alive>
【include】 和 【exclude】（2.1.0新增）
逗号分隔字符串： <keep-alive include="a,b">
正则表达式 (使用 v-bind)： <keep-alive :include="/a|b/">
数组 (使用 v-bind)：<keep-alive :include="['a', 'b']">
【max】 (2.5.0新增)
数字。最多可以缓存多少组件实例：<keep-alive :max="10">
【activated】 和 【deactivated】
在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。
keep-alive的页面：
第一次进入：created-> mounted-> activated，退出：deactivated。
再次进入，触发activated（这时我们可以拿到组件的所有data，可在此节点做一些请求更新页面数据）
订单页面A（有tab标签），点击跳转到详情页面B，当详情页B返回到订单tab列表页B时，需要保持之前的tab选中状态。
keep-alive设置
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view
router设置
{
path: '/list'，
name: 'List',
component: () => import('@/views/order/list'),
meta: {
keepAlive: true} // 设置页面缓存，保持tab状态
},
{
path: '/detail'，
name: 'Detail',
component: () => import('@/views/order/detail'),
meta: {
keepAlive: false} // 不需要缓存
},
结果发现，订单tab列表页缓存并没有生效！！！
原因分析：
通过v-if来判断是否生成keep-alive，当列表页面A符合条件时，内存缓存了组件状态。当跳转到详情页B时，不符合条件，由于v-if是挂载到keep-alive标签上，会把之前keep-alive的列表页面A进行销毁，再次进入到A会重新创建。
正确写法：
写法一：（v-if挂载到router-view上面）
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
写法二：(使用include属性，设置需要缓存的组件)
<keep-alive include="List">
<router-view></router-view>
</keep-alive>
文章浏览阅读2.3k次。扫描信号强度值（RSSI）cc254x在observer模式下能够扫描周围iBeacon的广播信息，在主事件回调函数中，发现事件GAP_DEVICE_INFO_EVENT就是发现新的iBeacon设备，并且扫描到的信息中包含信号强度信息。此时，将信号强度信息提取，并存储到数组中即可。// Length of bd addr as a string#define B_ADDR_STR_LEN_cc254*蓝牙室内定位
文章浏览阅读198次。本文主要整理Java的多线程机制、Java多线程的原理以及使用方法。线程的创建（基础）在Java中创建线程有两种方法：使用Thread类和使用Runnable接口。但在使用Runnable接口时需要建立一个Thread实例。所以无论是通过Thread类还是Runnable接口建立线程，都必须建立Thread类或它的子类的实例。Thread构造函数如下：public Thread();pu..._java 线程池 stepping
文章浏览阅读1.7k次。【matlab】【函数学习记录】寻找矩阵最大和次大极值点。_matlab如何求一个矩阵最大值和次大值
文章浏览阅读4.7k次，点赞2次，收藏5次。0x00 前言简述最近单位在做等保测评，由本人从事安全运维方面的工作（PS:曾经做过等保等方面的安全服务），所以自然而然的与信安的测评人员一起对接相关业务系统的检查，在做主机系统测评检查时发现了系统中某些配置不符合等保要求，需要对不满足要求的主机做进一步整改，好在我们众多的系统基本都是运行在虚拟机上搭建的kubernetes集群中，这样一来就可以尽可能减少加固系统给应用带来的影响，我们可以一台一台加固更新。在这样环境的驱动下不得不将通宵熬夜，我准备好了枸杞和保温杯，当然也把测试环境也准备了一套，并将以前_利用shell检查linux安全基线
文章浏览阅读835次。、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、rgb颜色空间灰度图像是一个特殊的彩色图像，r=g=b，如图所以，要将彩色图像转化为灰度图像，只需令每个像素的r=g=b=x即可.而x等于多少，视不同情况而定。补充：黑色 r=0 g=0 b=0白色 r=..._9a:e8:ec:54:a4:oc
文章浏览阅读1.4w次，点赞7次，收藏9次。重装centos7时,遇到见面卡死在[ok] started GNOME display manager此时按ctrl + alt f3 切换到登录界面,输入用户名 , 密码即可登录_centos7 started gnome display manager
文章浏览阅读1.1k次。搭建步骤一、Ubuntu 18.04.1 安装 apache2二、Apache修改网站根目录及默认网页三、安装数据库四、安装 --php五、安装 phpmyadmin六、安装并配置 WordPress七、开启apache2 Rewrite模块八、配置SSL一、Ubuntu 18.04.1 安装 apache2更新源sudo apt install apache2 -ysystemctl s..._个人部署玩
文章浏览阅读273次。html部分textarea首行自动缩进问题一开始, 在代码中 标签textarea我是这么写的,但是当我查看页面的时候,发现首行自动缩进了好几个空格,但是我想要的是,一进去,获取焦点后,就是在首位,没有缩进. 如下代码:<textarea rows="3" cols="70" class="text-note" maxlength="150"></textarea&..._web开发的奇葩问题
文章浏览阅读1w次。这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入有大神知道解决方法吗？在官网上下载的Ansys学生版本，安装后出现这个提示“RSS被禁用”，而且也没有桌面快捷方式。欢迎_rss被禁用
文章浏览阅读710次。在本教程中，我们将分析合成孔径雷达 (SAR) 图像，以检测地球表面具有统计意义的变化。正如副词“统计地”暗示的那样，我们需要对 SAR 图像的统计特性有基本的了解才能继续，而形容词“显着”意味着我们学习了假设检验的基础知识。我们将特别关注 GEE 档案中双极化强度 Sentinel-1 SAR 图像的时间序列。教程分为四部分：1. 单视和多视图像统计 2. 假设检验 3.多时态变化检测 4. 应用大部分材料基于我的文本Image Analysis, Classification and Cha_sentinel-1 change detection
文章浏览阅读706次。解决问题启动Vue项目执行npm run serve报错原因:使用了不同的编辑器,而且配置文件弄混了1.删除node_modules文件夹。2.使用国内镜像重新安装npm install --registry=https://registry.npm.taobao.orgnpm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install3.重新运行npm run serve...
文章浏览阅读911次。AQS 以及其实现类 ReentrantLock、ReentrantReadWriteLock 源码分析。_readwrite lock aqs