内存缓存组件

② 2021-02-03【技术】聊聊keep-alive组件的使用及其实现原理

keep-alive定义：
keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。

它提供了include与exclude两个属性，允许组件有条件地进行缓存。

这里的component组件会被缓存起来。

举个栗子

在点击button时候，coma与comb两个组件会发生切换，但是这时候这两个组件的状态会被缓存起来，比如说coma与comb组件中都有一个input标签，那么input标签中的内容不会因为组件的切换而消失。

props
keep-alive组件提供了include与exclude两个属性来允许组件有条件地进行缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

keep-alive的稿老声明周期执行
页面第一次进入，钩子的触发顺序
created-> mounted-> activated，退出时触发 deactivated
当再次进入（前进或者后退）时，只触发 activated
事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中；

将缓存name为a的组件。

name为a的组件将不会被缓存。
注意：此处的name值是与在名称为component组件中的name值对应的。

生命钩子
keep-alive提供了两个生命钩子，分别是activated与deactivated。

被keepalive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数
但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时 Vue 为我们解决了这个问题
被包含在 keep-alive 中创建的组件，会多出两个生命周期的亩腔钩子: activated 与 deactivated：
activated 当 keepalive 包含的组件再次渲染的时候触发
deactivated 当 keepalive 包含的组件销毁的时候触发
keep-alive是一个抽象的组件，keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，缓存的组件不会被 mounted,为此需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

参数理解

keep-alive 可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
注：当使用正则表达式或者数组时，一定要使用 v-bind

遇见 vue-router 结合router使用，缓存部分页面

所有路径下的视图组件都会被缓存

如果只想要router-view里面的某个组件被缓存，怎么迅敬衫办？
1、使用 include/exclude
2、使用 meta 属性

缺点：需要知道组件的 name，项目复杂的时候不是很好的选择

优点：不需要例举出需要被缓存组件名称

使用$route.meta的keepAlive属性：

需要在router中设置router的元信息meta：

说完了keep-alive组件的使用，我们从源码角度看一下keep-alive组件究竟是如何实现组件的缓存的呢？

created钩子会创建一个cache对象，用来作为缓存容器，保存vnode节点。

destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。

假设这里有 3 个路由： A、B、C。

需求如下：
默认显示 A
B 跳到 A，A 不刷新
C 跳到 A，A 刷新

实现方式如下：
在 A 路由里面设置 meta 属性：

在 B 组件里面设置 beforeRouteLeave：

在 C 组件里面设置 beforeRouteLeave：

这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。

防坑指南
1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
4.包含在 keep-alive 中，但符合 exclude ，不会调用 activated 和 deactivated。

keep-alive生命周期钩子函数：activated、deactivated
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

附录，题外话
生命周期函数：就是vue在某个时间段会自动执行的函数

1、beforeCreate(){}在执行的时候，data还有methods都没有被初始化。
2、created(){} data还有methods都被初始化好了，如果要调用 methods 方法或者操作 data 里面的数据，最早只能在 created 里面进行操作。
3、beforeMount(){} 表示模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。
4、mounted(){} 表示内存中模板已经真实的挂载到页面中去了，用户可以看到渲染好的界面了
注意这是一个生命周期函数的最后一个函数了，执行完这个函数表示 整个vue实例已经初始化完成了，组件脱离了创建阶段，进入运行阶段。

下面是运行期间的两个生命周期函数的钩子：
5、beforeUpdate(){} 表示我们的界面还没更新 但是data里面的数据是最新的。即页面尚未和最新的data里面的数据保持同步。
6、update(){} 表示页面和data里面的数据已经包吃同步了 都是最新的。
7、beforeDestory(){} 当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。
8、Destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了

③ 简述内存,高速缓存,外存之间的区别和联系

内存和外存的本质区别是，一个是内部运行提供缓存和处理的功能，也可以理解为协同处理的通道；而外存主要是针对储存文件、图片、视频、文字等信息的载体，也可以理解为储存空间。
内存是计算机中重要的部件之一，它是与CPU进行沟通的桥梁。计算机中所有程序的运凯笑行都是在内存盯早含中进行的，因此内存的性能对计算机的影响非常大。内存(Memory)也被称为内存储器，其作用是用于暂时存放CPU中的运算数据，以及与硬盘等外部存储器交换的数据。只要计算机在运行中，CPU就会把需要运算的数据调到内存中进行运算，当运算完成后CPU再将结果传送出来，内存的运行也决定了计算机的稳定运行。 内存是由内存芯片、电路板、金手指等部分组成的。
内存和外存的本质区别是，一个是内部运行提供缓存和处理的功能，也可以理解为协同处理的通道；而外存主要是针对储存文件、图片、视频、文字等信息的载体，也可以理解为储存空间。内存是计算机中重要的部件之一，它是与CPU进行沟通的桥梁。计算机中所有程序的运行都是在内存中进行的，因此内存的性能对计算机的影响非常大。内存(Memory)也被称为内存储器，其作用是用于暂时存放CPU中的运算数据，以及与硬盘等外部存储器交换的数据。只要计算机在运行中，CPU就会把需要运算的数据调到内存中进行运算，当运算完成后CPU再将结果传送出来，内存的运行也决定了计算机的稳定运行。 内存是由内存芯片、电路板、金手指等部分组成的。睁掘
而外存为了扩大存储容量，在计算机中还配备了存储容量更大的磁盘存储器和光盘存储器，称为外存储器，简称外存。此类储存器一般断电后仍然能保存数据。常见的外存储器有硬盘、软盘、光盘、U盘等。

④ 内存集成有哪些

Q: 内存集成有哪些 : ？
内存集成包括：1、敬兆缓存集成，2、内存数据库集成，3、内存缓存服务器集成，4、内存分布式缓存集察前成，5、内存分布式数据库集成，6、内存虚拟机集成，7、内存亮没租存储系统集成，8、非关系型数据库集成，9、内存对象存储集成，10、内存键值存储集成。

⑤ 缓存、内存、闪存的区别分别指什么样的东西

一、主体不同

1、缓存：是指访问速度比一般随机存取存储器（RAM）快的一种高速存储器

2、内存：是计算机中重要的部件之一，它是外存与CPU进行沟通的桥梁。

3、闪存：一种电子式可清除程序化只读存储器的形式，允许在操作中被多次擦或写的存储器。

二、特点不同

1、缓存：不像系统主存那样使用DRAM技术，而使用昂贵但较快速的SRAM技术。

2、内存：内存的运行也决定了计算机的稳定运行。内存条是由内存芯片、电路板、金手指等部分组成的。

3、闪存：是一种特殊的、以宏块抹写的EPROM。闪存进行一次抹除，就会清除掉整颗芯片上的数据。

三、作用不同

1、缓存：可以进行高速数据交换的存储器，它先于内存与CPU交换数据，因此速率很快。

2、内存：作用是用于暂时存放CPU中的运算数据，以及与硬盘等外部存储器交换的数据。

3、闪存：是一种非易失性存储器，即断电数据也不会丢失。因为闪存不像RAM（随机存取存储器）一样以字节为单位改写数据，因此不能取代RAM。

⑥ 内存、缓存、闪存的定义和具体作用！

缓存是指可以进行高速数据交换的存储器，它先于内存与CPU交换数据，因此速度很快
缓存（Cache memory）是硬盘控制器上的一块内存芯片，具有极快的存取速度，它是硬盘内部存储和外界接口之间的缓冲器。由于硬盘的内部数据传输速度和外界接口传输速度不同，缓存在其中起到一个缓冲的作用。缓存的大小与速度是直接关系到硬盘的传输速度的重要因素，能够大幅度地提高硬盘整体性能。当硬盘存取零碎数据时需要不断地在硬盘与内存之间交换数据，如果有大缓存，则可以将那些零碎数据暂存在缓存中，减小外系统的负荷，也提高了数据的传输速度。

硬盘的缓存主要起三种胡亏轿作用：一是预读取。当硬盘受到CPU指令控制开始读取数据时，硬盘上的控制芯片会控制磁头把正在读取的簇的下一个或者几个簇中的数据读到缓存中（由于硬盘上数据存储时是比较连续的，所以读取命中率较高），当需要读取下一个或者几个簇中的数据的时候，硬盘则不需要再次读取数据，直接把缓存中的数据传输到内存中就可以了，由于缓存的速度远远高于磁头读写的速度，所以能够达到明显改善性能的目的；二是对写入动作进行缓存。当硬盘接到写入数据的指令之后，并不会马上将数据写入到盘片上，而是先暂时存储在缓存里，然后发送一个“数据已写入”的信号给系统，这时系统就会认为数据已经写入，并继续执行下面的工作，而硬盘则在空闲（不进行裤肆读取或写入的时候）时再将缓存中的数据写入到盘片上。虽然对于写入数据的性能有一定提升，但也不可避免地带来了安全隐患——如果数据还在缓存里的时候突然掉电，那么这些数据就会丢失。对于这个问题，硬盘厂商们自然也有解决办法：掉电时，磁头会借助惯性将缓存中的数据写入零磁道以外的暂存区域，等到下次启动时再将这些数据写入目的地；第三个作用就是临时存储最近访问过的数据。有时候，某些数据是会经常需要访问的，硬盘内部的缓存会将读取比较频繁的一些数据存储在缓存中，再次读取时就可以直接从缓存中直接传输

计算机业界，内存这个名词被广泛用来称呼 RAM( 随机存取内存 ) 计算机使用随机存取内存来储存执行作业所须的暂时指令以及数据以使计算机的 CPU( 中央处理器 ) 能够更快速读取储存在内存的指令及数据。
例来说，当处理器加载一个应用程序 - 例如文字处理或页面编辑程序 - 到内存使应用程序能以最快速及最高效率的方式执行。以实用价值而言，将程序加载内存能够确保计算机能以更短的时间来执行作业而使工作能够更迅速地完成
内存与储存的差别

大多数人常将内存 (Memory) 与储存空间 (Storage) 两个名字混为一谈 , 尤其是在谈到两者的容量的时候 内存是指 (Memory) 计算机中所安装的随机存取内存的容量而储存 (Storage) 是指计算机内硬盘的容量 为了避免混淆 , 我们将计算机比喻为一个有办公桌与档案柜的办公室。想象一下这个办公桌与档案柜的比喻。想象每次想要阅读一份文件或数据夹都必须从档案柜中找寻的情形，这会大幅减低工作执行的速度 , 更别说会把人逼疯了。如果有足够的办公桌空间 ( 如内存 ), 便能够将所需要的档摊开 , 并能立即一眼就能找出所需的信息。

另一个内存与储存最重要的差别在于 : 储存于硬盘中的信息在关机后能够保持完整，但任何储存在内存中的数据在计算机关机后便会全部流失。就像在办公室的比喻中 , 任何在下空汪班时间后被遗留在桌上的档或档案都会全部被丢弃一样
增加计算机系统中的内存能够增加计算机的效能表现是众所皆知的。如果内存没有足够的空间 , 计算机就必须建立一个虚拟内存档案。在这个过程中 , 中央处理器在硬盘中保留一个空间来代替额外的随机存取内存 这个称为 ” Swapping” 的程序减低系统的速度一般的计算机从内存存取大约需要 200ns( 奈秒 ), 但从硬盘存取则需要 12,000,000ns 具体来说就等于花四个半月的时间来完成三分半中就能完成的工作 !
闪存存储器是保留实力,即使其内容删除.

Flash memory is a form of EAPROM (Electrically Alterable Programmable Read-Only Memory).闪存是一种eaprom(可变电可编程只读存储器).

Each bit of data in a flash memory device is stored in a transistor called a floating gate.每一个比特的数据储存在快闪记忆装置称为浮栅晶体管. The floating gate can only be accessed though another transistor, the control gate.浮动门虽然只能进入另一个晶体管,控制闸门.

The process the control gate uses to access the floating gate is a field emission phenomenon known as Fowler-Nordheim tunneling.利用过程控制闸门进入浮栅是场发射现象称为Fowler-Nordheim隧. Tunneling allows voltage to flow from the control gate to the floating gate through the dielectric layer of oxide which separates them.允许从隧道流电压控制的浮动栅栅绝缘层氧化物通过分隔他们.

⑦ 什么是内存缓存是干什么用的

缓存顾名思义就是缓冲存储的意思
当电脑从硬盘或网络中提取数据给CPU处理或CPU中处理的数据发送给输出设备都是经过内存集中发送，你内存512M，但当数据量大的时候一下子塞给CPU或一下字塞给内存或其他硬件都会造成数据堵塞而死机，这里缓存就起到一个缓冲数据的作用，避免死机，内存越大，缓存越大，系统运行速度就越快，这就是为什么内存在电脑中占重要地位的原因

⑧ Vue 怎么缓存当前的组件缓存后怎么更新说说你对keep-alive的理解是什么

keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

keep-alive 可以设置以下 props 属性：

关于 keep-alive 的基本用法：

使用 includes 和 exclude ：

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（ activated 与 deactivated ）：

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive

举个栗子:

当我们从 首页 –> 列表页 –> 商详页 –> 再返回 ，这时候列表页应该是需要 keep-alive

从 首页 –> 列表页 –> 商详页 –> 返回到列表页(需要缓存) –> 返回到首页(需要缓存) –> 再次进入列表页(不需要缓存) ，这时候可以按需来控制页面的 keep-alive

在路由中设置 keepAlive 属性判断是否需要缓存

使用 <keep-alive>

keep-alive 是 vue 中内置的一个组件

源码位置：src/core/components/keep-alive.js

可以看到该组件没有 template ，而是用了 render ，在组件渲染的时候会自动执行 render 函数

this.cache 是一个对象，用来存储需要缓存的组件，它将以如下形式存储：

在组件销毁的时候执行 pruneCacheEntry 函数

在 mounted 钩子函数中观测 include 和 exclude 的变化，如下：

如果 include 或 exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行 pruneCache 函数，函数如下：

在该函数内对 this.cache 对象进行遍历，取出每一项的 name 值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用 pruneCacheEntry 函数将其从 this.cache 对象剔除即可

关于 keep-alive 的最强大缓存功能是在 render 函数中实现

首先获取组件的 key 值：

拿到 key 值后去 this.cache 对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：

直接从缓存中拿 vnode 的组件实例，此时重新调整该组件 key 的顺序，将其从原来的地方删掉并重新放在 this.keys 中最后一个

this.cache 对象中没有该 key 值的情况，如下：

表明该组件还没有被缓存过，则以该组件的 key 为键，组件 vnode 为值，将其存入 this.cache 中，并且把 key 存入 this.keys 中

此时再判断 this.keys 中缓存组件的数量是否超过了设置的最大缓存数量值 this.max ，如果超过了，则把第一个缓存组件删掉

解决方案可以有以下两种：

每次组件渲染的时候，都会执行 beforeRouteEnter

在 keep-alive 缓存的组件被激活的时候，都会执行 actived 钩子

注意：服务器端渲染期间 avtived 不被调用