patch 过程中 insertedVnodeQueue 的问题

Question

老师您好

每次 patch 过程中都维护一份 insertedVnodeQueue 这个数组，组件的创建过程是个深度遍历，那么子组件 patch 结束后不是可以把 vnode 插入到这个数组中了嘛

然后执行这个 invokeInsertHook 不是也可以执行到当前组件的 mounted 钩子函数吗？
我的疑问是为什么 vue 在 invokeInsertHook 函数做红框这步操作

然后在 initComponent 中做下面这个拍平的操作

把所有的 vnode 都拍到根组件的 insertedVnodeQueue ，搞成一个一维数组再遍历执行对应的 mounted 钩子函数呢？

Answer 1

ustbhuangyi 2020-02-16 15:02:00

通过注释就可以看到，如果这个 vnode 是这个组件渲染的  root vnode，那么它的 mounted 钩子执行需要等待他们真正插入到 dom 后再调用，所以把它的父组件 vnode 的 data.pendingInsert 设置为 true，而不直接调用 mounted 钩子。

• 提问者 前端_未入门 #1

  非常感谢老师回答我的问题，我还是不太明白，为什么都要拍平成一维数组然后再执行？望老师指点

• ustbhuangyi 回复 提问者 前端_未入门 #2

  因为 vnode.data.pendingInsert 已经是一个数组了，而 insertedVnodeQueue 要保证是一维数组，因为后续对这个 queue 的遍历就是对一维数组的遍历。

• 提问者 前端_未入门 回复 ustbhuangyi #3

  非常感谢老师的回答，祝老师生活愉快