一、Keep-alive 概念及用法
keep-alive是一个抽象组件：它自身不会渲染DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive>
  <component></component>
</keep-alive>

props:

Include包含的组件 （字符串、数组、正则表达式） include='a'
Exclude 不包含的组件
Max 缓存组件的最大值（字符串、数字）

注：

keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称
当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高

二、生命周期及钩子
传统的生命周期：


beforeCreate(){}在执行的时候，***data还有methods都没有被初始化***
created(){} ,***data还有methods都被初始化好了***，如果要调methods方法或者操作data里面的数据，最早只能在created里面进行操作。
beforeMount(){} 表示***模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。***即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。
mounted(){}表示***内存中模板已经真实的挂载到页面中去了***，用户可以看到渲染好的界面了
beforeUpdate(){}  表示***我们的界面还没更新 但是data里面的数据是最新的***。即页面尚未和最新的data里面的数据包吃同步。
update(){} 表示***页面和data里面的数据已经包吃同步了 都是最新的***。
beforeDestory(){}  当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。
Destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了


keep-alive：
被keep-alive包含的组件不会被再次初始化，缓存的组件不会被mounted,也就意味着不会重走生命周期函数。
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated：


activated 当 keep-alive 包含的组件再次渲染的时候触发
deactivated 当keep-alive 包含的组件销毁的时候触发


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


页面第一次进入，钩子的触发：created-> mounted-> activated


退出时：触发deactivated。


当再次进入（前进或者后退）时：触发activated。


三、源码分析
算法：
LRU算法Least Recently Use（最近最少使用）：
在 this.cache 对象中存储该组件实例并保存 key 值,之后检查缓存的实例数量是否超过 max 的设置值,超过则根据 LRU 置换策略删除最近最久未使用的实例（即是下标为 0 的那个 key）

文章目录
kepp-alive 的了解
keep-alive 什么时候使用
keep-alive 作用
动态组件 keepalive 缓存
1 .组件缓存
1.include 字符串或正则表达，只有匹配的组件会被缓存
1）include数组形式：
2）include字符串形式
2.exclude 字符串或正则表达式，任何匹配的组件都不会被缓存
2.路由组件缓存
keep-alive 生命周期

kepp-alive 的了解
<keep-alive/> 是Vue的内置组件  
<keep-alive/> 包裹动态组件时，会 缓存不活动的组件实例 ，而不是销毁它们。
(可以使被包含的组件保留状态，或避免重新渲染)
	在vue 2.1.0 版本之后，keep-alive新加入了两个属性: 
include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 

keep-alive 什么时候使用
例子
	1.在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,     
返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,
但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,
这时候就需要用到 vue 的 keep-alive 技术了.
	2.当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置
然后又去购物车页面，再回到首页的时候能够保存住我刚才滑动的位置

keep-alive 作用
A.能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。避免反复渲染影响页面性能，同时也可以很大程度		上减少接口请求，减小服务器压力。
B.路由组件缓存
C.组件缓存

动态组件 keepalive 缓存
1 .组件缓存
将想要缓存得组件进行包裹，
使用keep-alive的include属性 include后面根的是组件的名字

1.include 字符串或正则表达，只有匹配的组件会被缓存
1）include数组形式：
	<keep-alive :include="['count','todo']">
		<count ></count>
		<todo ></todo>
	</keep-alive>

2）include字符串形式
<keep-alive include="count,todo">
	<count ></count>
	<todo ></todo>
</keep-alive>

2.exclude 字符串或正则表达式，任何匹配的组件都不会被缓存
<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

2.路由组件缓存
路由表中进行配置：
在配置路由的时候需要给路由添加meta属性，用keepAlive标示是否被缓存

//示例：
{
	path: '/',
	name: 'List',
	component: List,
	meta:{
		keepAlive:false // 想要缓存的路由组件 就设置为true, 反之false
	 }
},

判断router-view是否被包裹

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

keep-alive 生命周期
  在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated
  activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，
否则则不存在当引入keep-alive的时候，页面第一次进入，
钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。
当再次进入（前进或者后退）时，只触发activated。
注：只有当组件 <keep-alive> 内被切换，才会触发这两个钩子函数

export default {
  name: "",
  data() {
    return {
    };
  },
  props: {},
  components: {},
  mounted() {},
  methods: {},
  activated(){
    console.log('activated')
  },
  deactivated(){
    console.log('deactivated')
  }
};

keep-alive简介
1.什么是keep-alive

keep-alive是vue2.0新增的内置组件，可以用来缓存上个页面的数据，在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态
2.keep-alive的功能

项目主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力
3.keep-alive的使用场景

场景：A首页、B列表页、C详情页

三个页面：A B C 三个路由

搭配路由守卫经行缓存

路由组件的缓存：

A=>B B=>A ,A组件路由被缓存了

A=>C C=>A ,A组件路由不缓存
4.可以在路由文件中设置meta进行哪些需要缓存哪些不需要缓存
  <!--缓存的视图-->
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive">
                    </router-view>
                </keep-alive>
                <!--不缓存的视图-->
                <router-view v-if="!$route.meta.keepAlive">
                </router-view>     
path: '/classify',
    name: 'classify',
    component: () => import('@/views/classify/classify.vue'),
    meta: {
      title: '111',
      keepAlive: true
    }
  },
5.vue新增的周期函数以及属性的注意事项include exclude

（1）Vue中提供了一个内置组件keep-alive，使用元素将动态组件包裹起来，内部组件就会被缓存起来。
（2）包裹的组件，加载过的页面，再次进入时，是不会执行页面第一次进入时的部分生命周期函数。
（3）包裹的组件会新增两个生命周期函数activated和deactivated.
两个属性include和exclude可以让实现有条件的进行缓存。include包含的组件会被进行缓存，

exclude包含的组件不会被缓存。
6.使用include、exclude属性和beforeRouteEnter钩子函数

首先介绍一下include和exclude

是在vue2.0以后新增的属性

include是需要缓存的组件；

exclude是除了某些组件都缓存；

include 和 exclude 属性允许组件有条件地缓存。

二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：
<!-- 逗号分隔字符串 -->
<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>
beforeRouteEnter钩子函数

局部守卫
beforeRouteEnter(to, from, next) {  
// To Do
//to: 代表的是你想要进入的路由配置对象
//from: 代表的是你从哪来调过来的
//next: 是否让to进入from  next()
  },  

vue中keep-alive的使用
概念
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
作用
在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
原理
在 created钩子函数调用时将需要缓存的 VNode节点保存在 this.cache 中／在 render（页面渲染） 时，如果VNode 的 name 符合缓存条件（可以用include 以及 exclude控制），则会从 this.cache 中取出之前缓存的 VNode实例进行渲染。

VNode：虚拟DOM，其实就是一个JS对象

参数（Props）

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例

对生命周期函数变化

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated


在 keep-alive 组件激活时调用


deactivated


在 keep-alive 组件离开时调用

正常生命周期：beforeRouteEnter --> created --> mounted --> updated -->destroyed

使用keepAlive后生命周期：
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter --> activated --> deactivated

注：
1、这里的activated非常有用，因为页面被缓存时，created,mounted等生命周期均失效，你若想进行一些操作，那么可以在activated内完成(下面会举个栗子：列表页回到上次浏览位置)
2、activated   keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。 
3、deactivated   keep-alive组件停用时调用，该钩子在服务端渲染期间不被调用。

缓存整个项目
在 App.vue 里面
如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：
<template>
  <div id="app">
  	<keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>使用keepAlive后生命周期发生了哪些变化



<script>
export default {
  name: 'App'
}
</script>

结合Router，缓存部分页面
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

2、在router.js路由页设置：
new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false // 不需要缓存
      	  }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
        	keepAlive: true  // 需要缓存
      	  }
        },
        {
          path: 'seller',
          name: 'seller',
          component: Seller,
          meta: {
        	keepAlive: true  // 需要缓存
      	  }
        }
      ]
    }
  ]
})

注：

配置了keepAlive的页面，在再次进入时不会重新渲染，该页面内的组件同理不会再次渲染。而这可能会导致该组件内的相关操作（那些每次都需要重新渲染页面的操作：如父子组件间的传值）不再生效。 这一点可能会导致一些莫名其妙而又无从查证的bug

使用新增属性include/exclude,缓存部分页面
    <!-- 逗号分隔字符串 -->
    <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>

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