如何理解vue中的keep-alive？

听说有面试官问了什么是keep-alive，今天我们也写一写Vue中的keep-alive。众所周知，生活在蓝星的程序猿们不喜欢作者多逼逼，下面我们直奔主体。

一.什么是Keep-alive？

keep-alive是vue中的内置组件，keep-alive包裹的组件能够在该组件的切换过程中将页面的状态缓存在内存中，界面切换后被包裹的组件实例不会被销毁，防止界面重复渲染DOM。

二.Keep-alive的作用是什么？

对页面进行缓存，防止DOM重新渲染；

举例说明：在我们写商城项目时几乎都会有商品的搜索功能，当我们搜索检索到很多款商品时，我们点进去查看商品详情时，再返回时，界面就会重新初始化，就需要重新输入搜索。这样用户用起来就毫无体验了。这时候我们就需要使用到keep-alive这项技术了。

三.如何使用Keep-alive？

1.keep-alive 的属性

• include - （字符串或正则表达式）。名称匹配的组件会被缓存。
• exclude - （字符串或正则表达式）。匹配的组件都不会被缓存。
• max - （数字）。最多可以缓存组件实例的个数。

2.keep-alive的使用实例

我们是用两个组件进行路由切换，两个组件Home，User中都有输入框

			home组件
			<template>
			    <div class="home">
			        <h1>This is an home</h1>
			        <input type="text" />
			    </div>
			</template>
			<script>
			export default {
			    name:'Home'
			}
			</script>

			<template>
			    <div class="user">
			        <h1>This is an user</h1>
			        <input type="text" />
			    </div>
			</template>
			<script>
			export default {
			    name:'User'
			}
			</script>

注意理解：当我们在home组件输入内容后，然后切换到user组件，再返回home组件时，输入的内容被清除。这是因为我们在home组件切换到user组件后，home组件会被销毁，在进入home组件时是重新初始化的。

下面使用keep-alive组件对我们的组件进行包裹，将界面进行缓存。（在引入组件的标签那里进行包裹）

			<template>
			  <div id="app">
			    <div id="nav">
			      <router-link to="/">Home</router-link> |
			      <router-link to="/user">User</router-link>
			    </div>
			    <keep-alive>
			        <router-view/>
			    </keep-alive>
			  </div>
			</template>

注意理解：上述代码由于我们包裹的是router-view标签，所以当我们在home组件输入内容后跳转至user组件后也输入内容，这时候再切换就会发现，页面实例都会被保存了。但是， 我们可以发现，如果我们的项目每个组件都去保存实例的话非常影响程序的性能。

使用keep-alive的属性控制要缓存的组件。

    <!-- - include - （字符串或正则表达式）。名称匹配的组件会被缓存。 -->
    <!-- - exclude - （字符串或正则表达式）。匹配的组件都不会被缓存。 -->
    
		<keep-alive include="Home">
	       <router-view/>
	    </keep-alive>

利用路由中的meta属性结合v-if进行缓存。

		{
		      path: '/',
		      name: 'Home',
		      meta:{
		        keepAlive:true //在meta里吧keepAlive设为true
		      },
		      component: Home
		    }

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

根据路由中meta的属性中keepAlive的值来动态控制组件是否缓存，更加灵活方便。