Vue父子组件生命周期的执行过程

Vue的生命周期是指一个Vue 组件从创建、渲染到销毁的过程中所经历的不同阶段，每个阶段都有对应的生命周期钩子函数，可以在钩子函数中执行特定的操作，如初始化数据，监听状态变化以及清理资源等，生命周期包括：

创建阶段：

• beforeCreate：

在实例初始化之后，数据观测（data observer） 和 event/watcher 事件配置之前被调用

• created：

完成 data 和method 的初始化之后立即调用，此时 el 还没有挂载上去

挂载阶段

• beforeMount：

在挂载开始之前被调用，相关的render函数首次被调用

• mounted：

实例已经挂载到DOM结构上，此时 $el 已经可用，并且所有指令都已经被解析完，可以对DOM节点进行操作了

更新阶段

• beforeupdate

数据更新时调用，发生在虚拟DOM打补丁（patching）过程之前

• updated

因数据更改导致的视图重新渲染和打补丁完成后调用，注意在这个时候不要做任何可能导致进一步UI变更的事情，比如再次修改数据会引起额外的重绘开销

销毁阶段

• beforeUnmount/beforeDestory(Vue2 使用的是 beforeDestory)

即将卸载组件前调用，可用于释放额外资源，移除计时器或取消网络请求

• unmounted/destoryed(Vue2 使用的是 destoryed)

组件完全卸载后的回调，在这里做一些彻底清除工作

此外还有几个辅助性的生命周期钩子用于处理特殊情况下的需求：如：

errorCaptured：当捕获来自后代组件的错误时触发

activated&deactivated：对于包含<keep-alive>包裹的组件来说非常有用，分别表示激活和停用时刻的状态转换

对于父子组件的生命周期钩子函数执行顺序是：

在创建阶段（页面加载时）：

父组件的beforeCreate --> 父组件的created  --> 父组件的beforeMount  --> 子组件的beforeCreate   --> 子组件的created   --> 子组件的beforeMount   -->子组件 mounted   --> 父组件的mounted

在更新阶段：如果父子之间存在依赖关系，则会先从最底层往上逐层进行diff比较及视图刷新，具体的生命周期钩子包括 beforeUpdate 和updated

重新渲染   --> 子组件beforeUpdate   --> 子组件updated   -->父组件beforeUpdate   --> 父组件updated

在销毁阶段：反向地依次触发各层级摧毁相关的时间处理器（beforeDestroy destroyed）

父组件beforeDestroy   --> 子组件beforeDestroy   --> 子组件destroyed   --> 父组件destroyed