Vue动态组件和缓存组件

一、动态组件----component

        在开发中经常会有切换选项卡的业务需求，实现的方法有很多种，其中动态组件也是一种方式。动态组件有一个属性“is”，属性值可以是一个字符串，但里面的内容与组件名字一致。也可以通过绑定变量的方式在数据源中进行取值，根据业务需要决定显示哪一个组件。

<script>
	import box from "./components/out.vue"
	import box2 from "./components/out_son.vue"
	import box3 from "./components/box3.vue"
	export default {
		data() {
			return {
				comp:'box',
				box3
			}
		},
		components: {
			box,box2,box3
		},
		methods: {
			fn(arg){
				this.comp = arg
			}
		}
	}
</script>
<template>
	<div>
		<button @click="fn('box')">首页</button>
		<button @click="fn('box2')">加入我们</button>
		<button @click="fn('box3')">社区</button>
		<!-- 不加引号传递的参数则是组件对象 -->
		<!-- <button @click="fn(box3)">社区</button> -->
	</div>
	<!--1、以直接的属性值方式，等号后面是字符串，但这个字符串与注册的组件名一致，显示box组件 -->
	<!-- <component is='box'></component> -->
	<!-- 2、以绑定变量的方式，根据业务需要在数据源中取不同的值来显示不同的组件 -->
	<component :is='comp'></component>
	
    <!-- <keep-alive>
		<component :is='comp'></component>
	</keep-alive> -->
</template>

        点击切换的时候执行了3个生命周期函数：先是原本的组件的beforeUnmount、unmounted，然后才是切换到的那个组件的mounted。

        这种方式存在着一个问题，就是切换之后再切回来，原本输入的内容就不存在了。这时候就有了缓存组件，用以解决这个问题。

二、缓存组件----keep-alive

       用于缓存动态组件或者组件的状态，以减少组件的销毁和重新创建带来的性能损耗。这时动态组件必须嵌套在缓存组件中，这样就能够在切换之后保留原本输入的内容。添加了缓存组件之后，beforeUnmount、unmounted函数就不执行了，执行了另外两个函数，activated和deactivated。它们两个是keep-alive组件的两个生命周期钩子函数。这两个钩子函数会在包裹的组件切换到活动状态（被缓存后再次激活）和非活动状态（被缓存后离开活动状态）时被触发。

        如果需要有的组件缓存，有的不缓存。则需要用到缓存组件的两个属性：include、exclude，等号后面的名字与各组件的name属性匹配，name与data同级。exclude='box'，box组件不缓存，其他都缓存。include='box'，box组件缓存，其他都不缓存。

<keep-alive include='box'>
    <component :is='comp'></component>
</keep-alive>