vue中keep-Alive 源码和原理

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

1.作用

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

2.原理

在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。 （VNode：虚拟DOM，其实就是一个JS对象）

3.使用

参数名 | 值 | 描述 |

| include | 字符串或正则表达式 | 只有名称匹配的组件会被缓存。|

| exclude | 字符串或正则表达式 | 任何名称匹配的组件都不会被缓存。|

| max | 数字 | 最多可以缓存多少组件实例。|

4.使用方式

1.在 App.vue 中使用 keep-alive 标签，表示缓存所有页面

<div id="app"> 
    <keep-alive>
        <router-view />
    </keep-alive> 
</div>

2.使用 include、exclude 判断是否要缓存组件

<!--1、缓存 name 为 projectManage 的组件，如果有多个，用逗号隔开-->
 <keep-alive include="projectManage">
	<router-view />
 </keep-alive>

<!-- 2、name 为 projectOverview 的组件将不会缓存 -->
<keep-alive exclude="projectOverview">
   <router-view />
</keep-alive>

 <!-- 3、使用属性绑定动态判断 -->
 <keep-alive :include="includedComs">
	<router-view />
 </keep-alive>

3.在 router 目录下的 index.js 文件中使用 3.1 第一步：使用 meta: { keepalive: true }，表示该页面需缓存

{
   path: '/users',
   component: () => import('@/views/users/Users.vue'),
   meta: {
   	keepalive: true
   }
 },
 {
   path: '/rights',
   component: () => import('@/views/rights/Rights.vue')
 },

3.2 第二步：在 App.vue 文件中进行判断

<keep-alive> 
    <router-view v-if="$route.meta.keepalive" /> 
</keep-alive>

<router-view v-if="!$route.meta.keepalive" />

4.生命周期函数

• activated
  1、在 keep-alive 组件激活时调用
  2、该钩子函数在服务器端渲染期间不被调用
• deactivated
  1、在 keep-alive 组件停用时调用
  2、该钩子函数在服务器端渲染期间不被调用