Vue 生命周期以及子组件和父组件生命周期发生的先后顺序

从没有认真想过Vue组件的生命周期，以为所有的都是按created, mounted顺序发生和执行的。
直到今天在完成某一个业务时，才认真去思考组件的生命周期、子组件与父组件创建和挂载的时间点。

VUE组件的生命周期

如Vue.js官网中所说，Vue组件的生命周期可分为如下几个：
beforeCreated(): 在组件创建之前触发
created(): 在组件创建后触发
beforeMounted(): 在组件挂载到页面之前触发
mounted(): 在组件挂载到页面之后触发
beforeUpdate(): 在某些数据改变触发页面重新渲染之前触发
updated(): 在某些数据改变触发页面重新渲染之后触发
beforeDestroy(): 在组件销毁之前触发
destroyed(): 在组件销毁之后触发

这些生命周期看似简单，单个的组件的生命周期很简单，但是多个组件组合在一起就会觉得比较复杂。

子组件与父组件生命周期发生的先后顺序

在父组件与子组件中分别加入created()和mounted()钩子函数

<outer>
	<inner>
	</inner>
</outer>

// outer.vue
created() {
	console.log('outer created')
},
mounted() {
	console.log('outer mounted')
}

// inner.vue
created() {
	console.log('inner created')
}
mounted() {
	console.log('inner mounted')
}

最后的执行结果是:
uter created
inner created
inner mounted
outer mounted

可以发现，父组件先于子组件created，而子组件先于父组件mounted。