【Vue】当父子两个组件同时定义了 beforeCreate, created, beforeMount, mounted 四个钩子，它们的执行顺序是怎样的？

Danli.

于 2021-08-11 15:44:47 发布

阅读量555

点赞数 1

分类专栏：面试 Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45680114/article/details/119608451

版权

面试同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Vue.js

10 篇文章 0 订阅

订阅专栏

面试时常常会被问到，当父子组件同时定义了四个钩子，那么它们的执行顺序是怎么样的呢？

答：首先会执行父组件的初始化过程，所以会依次执行beforeCreate， created, 在执行挂载前又会执行beforeMount钩子，不过在生成真实dom 的 __patch__过程中遇到嵌套子组件后又会转为去执行子组件的初始化钩子beforeCreate, created, 子组件在挂载前会执行beforeMounte, 再完成子组件的Dom创建后执行 mounted。这个父组件的 patch 过程才算完成，最后执行父组件的mounted 钩子，这就是它们的执行顺序。如下：

parent beforeCreate
parent created
parent beforeMounte
    child beforeCreate
    child created
    child beforeMounte
    child mounted
parent mounted