vue生命周期调用顺序

单组件执行顺序

• 1、进入页面默认会自动执行beforeCreate -> created -> beforeMount -> mounted

  beforeCreate：在执行该函数时，$el、$data、methods、computed在this中【无法获取】
  created：在执行该函数时，$data、methods、computed在this中【可以】获取（Tip：如果我们不用操作DOM可以发起网络请求）
  beforeMount：template准备挂载
  mounted：在执行该函数时，$el可以在this中访问（Tip：可以发起网络请求）

• 2、当数据发生改变的前一刻会自动执行beforeUpdate
• 3、当数据改变完成会自动执行updated
• 4、当页面准备销毁的前一刻会自动执行beforeDestroy
• 5、当页面准备销毁完成会自动执行destroyed

父子组件执行顺序

• 进入页面自动执行生命周期钩子顺序

首先会自动执行【父组件】的生命周期钩子beforeCreate -> created -> beforeMount
然后会自动执行【子组件】的生命周期钩子 beforeCreate -> created -> beforeMount-> mounted
最后在自动执行【父组件】的生命周期钩子mounted

• 当组件数据发生更改：【各自执行各自】的生命周期钩子

父组件自己的数据发生改变执行自己的生命周期钩子beforeUpdate、updated
子组件自己的数据发生改变执行自己的生命周期钩子beforeUpdate、updated

• 当组件被销毁时，执行生命周期钩子有：

父组件会先执行beforeDestroy
子组件在执行beforeDestroy、destroyed
最后父组件执行destroyed

父子组件及mixin的生命周期执行顺序

mixin的beforeCreate > 父beforeCreate > mixin的created > 
父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 
子created > 子beforeMount > 子mounted > mixin的mounted >父mounted