Vue-js父子组件渲染过程简介

发表于 | 更新于 | 评论数： | 阅读次数：

Vuejs组件化开发是前端工程化的一个重要里程碑。在实际开发过程中，子组件渲染得不到理想的视觉效果。导致这一问题的原因埋藏在Vuejs父子组件的渲染过程。因此简单介绍Vuejs父子组件的渲染过程。

加载渲染过程

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

子组件更新过程

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

父组件更新过程

父beforeUpdate->父updated

销毁过程

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

参考链接

  1. vue父子组件的渲染顺序, by rosenWang.
  2. Vue-js入门简介,by jackhuang.
  3. inheritAttrs、vm.$listeners 、vm.$attrs 详解,by 简单tao的简单.