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钩子函数");}