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
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容