Vue学习之—动态组件中的activated与deactivated钩子函数

在学习这两个钩子函数之前呢，怎么需要先了解下Vue内置的动态组件< component >以及与之相配套的< keep-alive > 组件：

动态组件指的是动态切换组件的显示与隐藏；
- < component is = " " > 标签，内置组件，占位符，专门用来实现动态组件的渲染；
- is 属性指定要渲染出来的组件的名字，指定的值是组件的注册名称；
- is 属性指定的组件名称是什么，就会在< component >标签中渲染什么组件；
- 当只使用 < component > 组件动态切换组件的时候，被隐藏的组件会被销毁，显示的组件会被创建；

<template>
	<div>
		<!-- 点击按钮切换显示的组件 -->
		<button @click="show = 'Left'"></button>
		<button @click="show = 'Right'"></button>
		<component :is="show"></component>
	</div>
</template>

<style></style>

<script>
	// 导入组件
	import Left from 'xxx'
	import Right from 'xxx'
	
	export default {
		data(){
			// 赋予哪个注册组件名称component就显示哪个组件
			show:''
		},
		// 注册组件
		components:{
			Left,
			Right
		}
	}
	// 当点击按钮切换组件的时候显示的组件会被创建，隐藏的组件会被销毁
</script>

< keep-alive > 标签，可以把内部的组件进行缓存，而不是销毁组件；
- 默认情况下，切换动态组件时无法保持组件的状态，此时可以使用 vue 内置的 < keep-alive > 标签保持动态组件的状态；
- < keep-alive > 的生命周期；重点来了！！！
  - 当组件被缓存时，会自动触发组件的 deactivated 生命周期函数；
  - 当组件被激活时，会自动触发组件的 activated 生命周期函数；

activated与deactivated

先说下这个生命周期钩子，官网说其是在服务器端渲染期间不被调用，其实说白了就是在挂载后和更新前被调用的；

但如果该组件中没有使用缓存，也就是没有被 < keep-alive > 包裹的话，activated是不起作用的：

//template中
<template>
	// 被包裹在<keep-alive>组件中
	<keep-alive>
		<component is="component1"></component>
	</keep-alive>
	//外面没有<keep-alive>组件包裹
	<component is="component2"></component>
</template>

//component1中
  created() {
    console.log("1激活created钩子函数");
  },
  activated() {
    console.log("1激活activated钩子函数");
  },
  mounted() {
    console.log("1激活mounted钩子函数");
  }

//component2中
  created() {
    console.log("2激活created钩子函数");
  },
  activated() {
    console.log("2激活activated钩子函数");
  },
  mounted() {
    console.log("2激活mounted钩子函数");
  }