Vue2-mixin+父子组件+生命周期执行顺序

背景

• 学习vuerouter源码的时候发现 在Vue的mixin的beforeCreate 中 获取this.$options.$router 第一次执行的时候竟然获取不到（我想象中时 肯定先执行 root组件的beforeCreate）
• 于是乎就干脆自己整体都打印一遍，验证一下自己所了解的执行顺序

先放结论

• 在new vue时先执行了一次 beforeCreate created 后再进行挂载传进来的属性

• 组件构建生命周期顺序： beforeCreate->created-> beforeMount -> mounted

• 组件销毁生命周期顺序： beforeDestroy ->destroyed

• 组件mixin生命周期执行顺序： Vue原型上的minxin ->外部引用的minxin - >内部的

• 父子组件构建过程： 父（beforeCreate -> created -> beforeMount ）->子（beforeCreate -> created -> beforeMount ）->子（mounted）->父（mounted）

• 父子组件销毁去父级路由时 ： 父（beforeDestroy ）->子（beforeDestroy) ->子（destroyed) -> 父（destroyed）

• 父子组件销毁去非父级路由时： 新组件（beforeCreate -> created-> beforeMount）-> 旧组件销毁-> 新组件(mounted)

浏览器打印如下

构建过程

切换组件

简单画了一个流程图

• 红色 +绿色箭头：构建过程
• 黑色箭头：销毁过程
• 组件切换时走的过程是 ：新组件 绿色箭头 -> 旧组件 黑色箭头-> 新组件 绿色箭头