本文共 858 字，大约阅读时间需要 2 分钟。

1. 加载渲染过程

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

2. 更新过程

子组件更新
父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated

父组件更新
父组件 beforeUpdate -> 父组件 updated

3. 销毁过程

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

Vue中父子组件生命周期顺序如下：

可以看到父组件在渲染完成之后并不是马上挂载，而是先等待子组件创建、渲染、挂载完成之后再去挂载。

父组件先初始化 => 父组件渲染完毕 => 子组件开始初始化 => 子组件挂载完毕 => 父组件挂载完毕

那么在子组件中怎么知道父组件是否挂载完成呢？可以使用EventBus作为事件总线。

在main.js中定义Vue.prototype.$bus = new Vue()，将$bus变量挂载到Vue的原型上，这样Vue实例就可以访问到这个变量。

在父组件挂载完毕的时候向外触发事件，代码如下：

<script>export default {   	mounted() {   		this.$bus.$emit('parentMounted');	}}</script>

在子组件中监听EventBus中的事件，代码如下：

<script>export default {   	mounted() {   		this.$bus.$on('parentMounted', function() {   			console.log('父组件挂载完毕！');		})	}}</script>