Vue 生命周期篇

1. 生命周期概述

1. 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件这些事件，统称为生命周期
2. 生命周期钩子：也称作 生命周期事件或 生命周期函数
3. 这些生命周期函数也是Vue实例的属性成员与data、methods…平级，当我们需要在某个生命周期阶段处理业务
   的时候可以，可以使用某个生命周期函数
4. 主要的生命周期函数分为三类

2. 生命周期函数

2.1 创建期间的生命周期函数

1. 当刚初始化一个 Vue 实例对象的时候，这个对象身上只有一些默认的生命周期函数和默认的事件，其它东西都没有创建。
2. 以下是默认的生命周期函数，按排序先后执行：
3. 第一个生命周期函数：beforeCreate() 此时data、methods中的数据还没初始化
4. 第二个生命周期函数：created() 此时data、methods中的数据已经初始化了
5. 第三个生命周期函数：beforeMount() 此时el控制区域的模板已经在内存中编辑完成，但是尚未把模板渲染到页面中
6. 第四个生命周期函数: mounted() 此时已经将内存中编译好的模板，替换到浏览器的页面中去了
7. 注：当第四个生命周期函数执行完，就表示实例已经被完全创建好了

2.2 运行期间的生命周期函数

1. 第五个生命周期函数：beforeUpdate() 此时 data 中的数据被更新了，但是还没有同步到页面中
2. 第六个生命周期函数：updated() 此时页面中的数据和被更新的 data 数据同步了
3. 注：这两个函数会根据 data 数据的改变，触发0次到N次

2.3 销毁期间的生命周期函数

1. 第七个生命周期函数：beforDestroy() 此时 Vue 实例身上的 data 、methods、指令、 过滤器 ...都处于
   可用状态，还没有真正执行销毁的过程
2. 第八个生命周期函数：destroyed() 此时组件已经完全被销毁了，组件中所有的数据、指令 ...都不可用了

2.4 最重要的两个生命周期函数

1. 第二个生命周期函数：created() 此时data、methods中的数据已经初始化了
2. 第四个生命周期函数： mounted() 如果要通过某些插件操作页面上的DOM节点，最早要在mounted中执行

3. keep-alive 用法 及activated,deactivated这两个生命周期函数

3.1 keep-alive的使用

1. <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

2. 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

3. 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。

4. <keep-alive>主要用于保留组件状态或避免重新渲染。

   <!-- 基本 -->
   <keep-alive>
   	<component :is="view"></component>
   </keep-alive>
   
   <!-- 多个条件判断的子组件 -->
   <keep-alive>
   	<comp-a v-if="a > 1"></comp-a>
   	<comp-b v-else></comp-b>
   </keep-alive>
   
   <!-- 和 `<transition>` 一起使用 -->
   <transition>
   	<keep-alive>
   		<component :is="view"></component>
   	</keep-alive>
   </transition>
   <!-- 注意:<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性
        的子元素，<keep-alive> 要求同时只有一个子元素被渲染。-->
   

3.2 activated和deactivated生命周期函数

1. 注意一点：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在。
2. 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
3. 事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中， activated 中的不管是否需要缓存都会执行。

   created() {
   	console.log(`我是第一个created`);
   },
   mounted(){
   	console.log(`我是第二个mounted`);
   },
   activated(){
   	console.log(`我是第三个activated`);
   	console.log("页面第一次进入的时候，钩子触发的顺序是created->mounted->activated",'只要渲染页面就会被调用');
   },
   deactivated(){
   	console.log("页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated");
   },
   

   

4. 生命周期图解