简介

Vue中的生命周期函数也可以支撑位生命周期钩子（hook），在特定的时期，调用特定的函数。

随着项目需求的不断扩大，生命周期函数被广泛使用在数据初始化以及回收、UI的改变、发起异步请求等各个方面。

而Vue实例的生命周期函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestpry、destroyed。

目前网上有需要许多的文档，但也都只是分析了表象。这篇文档，将主要从Vue源码部分分析，为什么会这样。

表象及功能

官方图例

上图直接使用Vue官方文档的图片，图片虽长，但可以准确的反应出各个周期函数出发的时间点顺序。

beforeCreate: 发生在创建Vue对象，初始化事件(events)以及生命周期(LifeCycle)之后。

created: 发生在初始化injections和reactivity之后。

beforeMount: 发生在模板渲染结束之后。*到确认！！！！

mounted: 发生在组件挂载之前。

beforeDestroy: 销毁组建之前

destrpyed: 销毁组建之后

beforeUpdate: 监听到数据变化，但尚未更新试图

updated: 试图更新完毕

举个栗子

---

参考资料

Vue官方文档#实例生命周期钩子