Vue 生命周期的执行顺序

在单一组件中，钩子的执行顺序是 beforeCreate -> created -> beforeMount -> mounted -> …... -> destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢?

挂载阶段

• 1、首先执行的是父组件的 beforeCreate 周期
• 2、执行的是父组件的 created 周期
• 3、执行的是父组件的 beforeMount 周期
• 4、执行的是子组件的 beforeCreate 周期
• 5、执行的是子组件的 created 周期
• 6、执行的是子组件的 beforeMount 周期
• 7、执行的是子组件的 mounted 周期
• 8、执行的是父组件的 mounted 周期

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

更新阶段

父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

销毁阶段

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

规律就是：父组件先开始执行，然后等到子组件执行完，父组件收尾