Vue组件的生命周期

有一个需要是分别在创建B组件和B-Bro组件时利用事件总线$on（注册）一个事件，在销毁组件前$off（注销）这个事件，

开始我是分别在created中$on，在beforeDestory中$off，但是发现B-Bro中的事件注册不上该事件，最后发现是生命周期的原因：

B-Bro beforeCreate -> B-Bro created -> B-Bro beforeMount -> B beforeDestory -> B destoryed -> B-Bro mounted

B-Bro在created注册的该事件，在B组件的beforeDestory中又销毁了。既然是生命周期的原因，那就调整下注册事件的时间，放在mounted。

 

下面是在控制台打印的生命周期过程：

页面结构

//wapper是在这个组件中的生命周期标识
<div>
   <A></A>
</div>

//A是这个组件的生命周期标识
<A>
  //booleanValue控制B和B-bro组件的切换，默认为 true
  <B v-if="booleanValue"></B> //B是这个组件的生命周期标识
  <B-bro v-else></B-bro>//B-bro是这个组件的生命周期标识
</A>

进入这个页面的生命周期过程：

切换booleanValue值为false后，B销毁和B-Bro创建的生命周期过程：

总结：

beforeCreate和created两个生命周期是连着的，但beforeMount和mounted不一定是连着的。