Vue组件中的生命周期函数执行流程

Vue的生命周期

什么是生命周期呢？

• 生物学上，生物生命周期指得是一个生物体在生命开始到结束周而复始所历经的一系列变化过程；
• 每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程；
• 在这个过程中的某一个阶段，我们可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服务器数据）；
• 但是我们如何可以知道目前组件正在哪一个过程呢？Vue给我们提供了组件的生命周期函数；

生命周期函数：

• 生命周期函数是一些钩子函数（回调函数），在某个时间会被Vue源码内部进行回调；
• 通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段；
• 那么我们就可以在该生命周期中编写属于自己的逻辑代码了；

生命周期流程图:

生命周期流程分析:

使用任何一个组件时, 都会创建组件的实例, 在创建组件实例之前, 会回调beforeCreate函数

beforeCreate回调

beforeCreate回调完成之后, 就会创建组件实例, 组件实例创建完成, 回调created函数

created回调

created回调完成, 会对template模板进行编译, 编译之后在准备挂载到虚拟DOM之前, 调用beforeMount函数

beforeMount回调

开始将编译后的模板挂载到虚拟DOM, 在将虚拟DOM渲染成真实的DOM展示到界面, 挂载完成后, 回调mounted函数

mounted回调

挂载完成, 如果数据发生了更新, 那么就会回调beforeUpdate函数

beforeUpdate回调

回调beforeUpdate之后, 会根据最新数据生成新的VNode, 重新渲染成新的虚拟DOM, 再根据新的虚拟DOM渲染成真实DOM, 此时数据更新完成, 调用updated函数

updated回调

如果后面又有数据更新, 那么就会重新调用beforeUpdate和updated函数

当有一个组件不再使用时, 那么就会回调beforeUnmount函数

beforeUnmount回调

将要删除的组件之前挂载在虚拟DOM中的VNode从虚拟DOM移除, 移除之后回调updated

unmounted回调

最后将组件实例销毁掉

---

上面众多生命周期函数中, 我来给大家说说常用的生命周期函数和应用场景吧 :

created(重要)

1. 发送网络请求
2. 事件监听
3. this.$watch()

mounted(重要)

• 元素已经被挂载完成, 常用于获取DOM, 使用DOM

unmounted(相对重要)

• 常用于回收操作(取消事件监听)