vue中如何使用keep-alive
1.keep-alive的概念
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。
2.keep-alive的作用
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
3.生命周期函数
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

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


activated

      在 keep-alive 组件激活时调用

      该钩子函数在服务器端渲染期间不被调用


deactivated

      在 keep-alive 组件停用时调用

 			该钩子在服务器端渲染期间不被调用


4：缓存所有的页面
1：在APP.vue里面

  	<keep-alive>
      <router-view/>
    </keep-alive>



5.根据条件缓存页面
1：在 App.vue 里面

  <div id="app">
  	// 1. 将缓存 name 为 test 的组件
  	<keep-alive include='test'>
      <router-view/>
    </keep-alive>
	
	// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
	<keep-alive include='a,b'>
  	  <router-view/>
	</keep-alive>
	
	// 3. 使用正则表达式，需使用 v-bind
	<keep-alive :include='/a|b/'>
  	  <router-view/>
	</keep-alive>	

	
	// 5.动态判断

	<keep-alive :include='includedComponents'>
  	  <router-view/>
	</keep-alive>
	
	// 5. 将不缓存 name 为 test 的组件
	<keep-alive exclude='test'>
  	  <router-view/>
	</keep-alive>
  </div>


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

6.结合Router，缓存部分页面

export default 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  // 需要缓存
      	  }
        }
      ]
    }
  ]
})

概念
    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 - 数字。最多可以缓存多少组件实例。

生命周期函数
  1. activated
      在 keep-alive 组件激活时调用

      该钩子函数在服务器端渲染期间不被调用
  2. deactivated
      在 keep-alive 组件停用时调用

      该钩子在服务器端渲染期间不被调用
    被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
    使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。
    注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。
缓存所有页面

在 App.vue 里面

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

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

根据条件缓存页面

在 App.vue 里面

<template>
  <div id="app">
  	// 1. 将缓存 name 为 test 的组件
  	<keep-alive include='test'>
      <router-view/>
    </keep-alive>
	
	// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
	<keep-alive include='a,b'>
  	  <router-view/>
	</keep-alive>
	
	// 3. 使用正则表达式，需使用 v-bind
	<keep-alive :include='/a|b/'>
  	  <router-view/>
	</keep-alive>	
	
	// 5.动态判断
	<keep-alive :include='includedComponents'>
  	  <router-view/>
	</keep-alive>
	
	// 5. 将不缓存 name 为 test 的组件
	<keep-alive exclude='test'>
  	  <router-view/>
	</keep-alive>
  </div>
</template>

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

结合Router，缓存部分页面

在 router 目录下的 index.js 文件里

import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Goods = resolve => require(['@/components/home/goods'], resolve)
const Ratings = resolve => require(['@/components/home/ratings'], resolve)
const Seller = resolve => require(['@/components/home/seller'], resolve)

Vue.use(Router)

export default 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  // 需要缓存
      	  }
        }
      ]
    }
  ]
})


在 App.vue 里面

<template>
  <div id="app">
  	<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

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

文章目录
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()
  },