深入分析Vue EventBus总线传值时的生命周期问题

Vue EventBus总线简介

在Vue的非父子组件传递数据时，我们会用到Vue的EventBus总线机制，也就是在Vue的原型上声明一个vue实例，通过Vue的属性来链接各个页面。

Vue EventBus传值生命周期

当我们在B页面通过$emit()触发总线传值时，A页面会在不同的生命周期阶段收到总线传递过来的数据。

• mounted ：mounted是Vue实例的最后一个生命周期钩子，在mounted阶段，所有DOM元素都已挂载完毕，此时我们可以通过$on()监听总线传递过来的数据。
• created ：created是Vue实例的第二个生命周期钩子，在created阶段，组件的实例已创建，但DOM元素还未挂载。此时我们可以通过$on()监听总线传递过来的数据，但此时的数据可能为空。
• beforeCreate ：beforeCreate是Vue实例的第一个生命周期钩子，在beforeCreate阶段，Vue实例还未创建。此时无法通过$on()监听总线传递过来的数据。
• beforeMount ：beforeMount是Vue实例的第三个生命周期钩子，在beforeMount阶段，组件的实例已创建，但DOM元素还未挂载。此时我们可以通过$on()监听总线传递过来的数据，但此时的数据可能为空。

总线传值生命周期问题分析

那么为什么在不同的生命周期阶段打印总线传递过来的值，我们会发现每个阶段打印的数据并不相同呢？这是因为Vue组件的生命周期是顺序执行的，也就是说，只有当前面的生命周期阶段执行完毕后，后面的生命周期阶段才会执行。

在mounted阶段，所有的DOM元素都已挂载完毕，此时我们可以通过$on()监听总线传递过来的数据。因此，在mounted阶段，我们可以打印出总线传递过来的值。

在created阶段，组件的实例已创建，但DOM元素还未挂载。此时我们可以通过$on()监听总线传递过来的数据，但此时的数据可能为空。这是因为总线传递过来的数据是在DOM元素挂载完毕后才发送的，因此在created阶段，我们可能无法打印出总线传递过来的值。

在beforeCreate阶段，Vue实例还未创建。此时无法通过$on()监听总线传递过来的数据。因此，在beforeCreate阶段，我们无法打印出总线传递过来的值。

在beforeMount阶段，组件的实例已创建，但DOM元素还未挂载。此时我们可以通过$on()监听总线传递过来的数据，但此时的数据可能为空。这是因为总线传递过来的数据是在DOM元素挂载完毕后才发送的，因此在beforeMount阶段，我们可能无法打印出总线传递过来的值。

总结

在Vue EventBus总线传值时，由于Vue组件的生命周期是顺序执行的，因此，总线传递过来的数据在不同的生命周期阶段打印出的值可能不同。在mounted阶段，我们可以打印出总线传递过来的值。在created、beforeCreate和beforeMount阶段，我们可能无法打印出总线传递过来的值。