Vue 的⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么?

渲染过程:
⽗组件挂载完成⼀定是等⼦组件都挂载完成后,才算是⽗组件挂载完,所以⽗组件的mounted在⼦组 件mouted之后。

⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate -> ⼦created -> ⼦beforeMount -> ⼦mounted -> ⽗mounted

⼦组件更新过程:

  1. 影响到⽗组件: ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗updted
  2. 不影响⽗组件: ⼦beforeUpdate -> ⼦updated

⽗组件更新过程:

  1. 影响到⼦组件: ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗updted
  2. 不影响⼦组件: ⽗beforeUpdate -> ⽗updated

销毁过程:
⽗beforeDestroy -> ⼦beforeDestroy -> ⼦destroyed -> ⽗destroyed

父级组件中如果在子级组件上加个v-if判断,父组件更新数据使条件达成展示组件,条件达成时:
父 beforeUpdate ->子 beforeCreate ->子created ->子 beforeMount ->子 mounted ->父 updated

看起来很多好像很难记忆,其实只要理解了,不管是哪种情况,都⼀定是⽗组件等待⼦组件完成后,才 会执⾏⾃⼰对应完成的钩⼦,就可以很容易记住。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容