insertedVnodeQueue的梳理

Question

有关insertedVnodeQueue的梳理
1，每个组件都有一个insertedVnodeQueue
在patch这个组件时，insertedVnodeQueue为[]
2，insertedVnodeQueue中放的是这个组件中具有data属性的vnode，其中的子组件是占位vnode
3，当这个组件patch完后，会遍历insertedVnodeQueue，执行vnode.data.hook.insert()函数，执行这个vnode的mounted钩子
……………………………………………………………………
注1：最后一个子组件在patch完后，它的insertedVnodeQueue还是[]，因为这个组件里面全是原生html，insertedVnodeQueue中并没有收集到vnode。也就是说最后一个子组件patch完后，不会执行它的mounted。
而是要等到它的父组件patch完后，再执行最后一个子组件的mounted。因为最后一个子组件的父组件的insertedVnodeQueue里面有最后一个子组件的占位vnode
…………………………………………………………………………
注2:
new Vue()的mounted的执行地方:是在new Watcher()下面
注3：
是不是每个组件在patch完后，又都会执行new Watcher()下面这个语句：
if(vm.$vnode==undefined){mounted钩子}
仅仅组件的vm.$vnode有值，所以不执行里面的钩子

Answer 1

慕工程2451917 2021-04-09 22:27:09

这里我也看了一下, 感觉自己理解的可能没你的深 , 我只是说一下我的理解和结论 , 感觉平常跟你交流和沟通也比较多, 留个联系方式 ? 

首先第一个 , 组件是通过 递归的方式来进行加载的, 我觉得得反着来看, 第一步就要去看 patch 方法最后的那个invokeInsertHook , 这个方法就是判断如果你是root组件, 遍历所有的 queue ,并且一并执行他们的 vnode.data.hook.insert 去更改 _isMounted 状态并触发 vm.callVmHook ,

但是这个函数还没完 , 这里如果不是root 组件, 就会把queue赋值给parent.data.pendingInsert, 也就是说在这里 会一层一层的传递到 root 组件, 虽然是赋值给 pendingInsert

第二个就是做合并了,  在 initComponent 中 首先就是判断了当前vnode 有没有 后代需要合并的 queue, 因为子组件会先于当前组件执行, 所以 如果有那就必定会赋值给当前vnode.data.pendingInsert , 然后就是合并了, 当前组件会合并后代节点 , 并且将 vnode.data.pendingInsert 重置成空 insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert) , 在重置之后再进行 queue.push , 也就是说,每次的当前组件的后代组件一定会先插入至 queque , 然后到了 root 组件, 其实也就是执行了第一步 .... 

• 慕工程2451917 #1

  其实这里主要就是那个 isInitialPatch , 这个变量默认是 false , 但是在 patch oldVnode = null时就会去 isInitialPatch = true , 也就是确保 invokeInsertHook 只会在第一次的时候执行.