子组件的mounted钩子是已经挂载在页面上还是挂载在父组件上？

Question

如果是挂在页面上，我记得之前课程讲的不是先父子组件生成一份dom再挂上去的？那为什么会是mounted是子先执行，父后执行，还是我哪里理解错了？

Answer 1

ustbhuangyi 2019-07-16 10:12:37

首先，mounted 钩子执行是在 patch.js 内部通过执行 invokeInsertHook 触发的，它内部是通过遍历 insertedVnodeQueue 依次执行。而这个函数的执行的时候，vnode 节点都已经通过 DOM API 插入到真实 DOM 中了。
其次，为什么子组件和 mounted 先执行，而父组件的后执行，在不考虑异步组件的情况下，Vue 是通过递归的方式创建整个组件树的，子组件的 vnode 会先于父组件添加到 insertedVnodeQueue 中，所以最终遍历 insertedVnodeQueue 的时候，也是子组件的 mounted 先执行。