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() 模板已经在内存中编辑完成，但是尚未把模板渲染到页面中
6. 第四个生命周期函数: mounted() 此时已经将内存中编译好的模板，替换到浏览器的页面中去了
7. 注：当第四个生命周期函数执行完，就表示实例已经被完全创建好了

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

1. 第五个生命周期函数：beforeUpdate() 此时 data 中的数据被更新了，但是还没有同步到页面中
2. 第六个生命周期函数：updated() 此时页面中的数据和被更新的 data 数据同步了

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

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

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

1. 最重要的两个生命周期函数，都是创建期间的
2. 第二个生命周期函数：created() 此时data、methods中的数据已经初始化了
3. 第四个生命周期函数: mounted() 此时已经将内存中编译好的模板，替换到浏览器的页面中去了

3. 生命周期图解