Vue的生命周期详解

图片来自https://cn.vuejs.org/v2/guide...

1、Vue的生命周期

由图可以看出，Vue生命周期最常用的钩子函数包括：
beforeCreate（此时date、method和el均没有初始化，可以在此加载loading）
created（此时date和method初始化完成，但是DOM节点并没有挂载，判断是否有el节点，如果有则编译template，如果没有则使用vm.$mount创建一个默认节点，此时可以在DOM渲染之前进行数据的初始化和method的自执行等）

beforeMount（编译模板，并且将此时在el上挂载一个虚拟的DOM节点）
mounted（编译模板，且将真实的DOM节点挂载在el上）

beforeUpdate（在数据有更新时，进入此钩子函数，虚拟DOM被重新创建）
updated（数据更新完成时，进入此钩子函数）

beforeDestory（组件销毁前调用，此时将组件上的watchers、子组件和事件都移除掉）
destoryed（组件销毁后调用）

一般一个Vue实例初始化时，只会执行前四个钩子函数

2、Vue实例和子组件之间的生命周期

在Vue中，由于父元素的template模板嵌套了子元素，因此在编译模板时，会先进入到父元素的template，然后层层递归进行子元素的模板编译。
在创建时，父子组件的生命周期是：
父组件beforeCreated -> 父组件created -> 父组件beforeMounted -> 子组件beforeCreated -> 子组件created -> 子组件beforeMounted -> 子组件mounted -> 父组件mounted。
在销毁时，父子组件的生命周期是：
父组件beforeDestory -> 子组件beforeDestoryed -> 子组件destoryed -> 父组件destoryed

总之记住，父子组件的生命周期遵循：由外到内，再由内到外

参考：
https://cn.vuejs.org/v2/guide...
https://segmentfault.com/q/10...
此文章目前只是记录，后续有持续更新。