patch疑问

Question

patch流程基本上弄明白了，但是还是有一点就是patch组件占位符vnode，是通过new占位符vnode对象上componentOptions的Ctor来实现的，我记得Ctor是继承vue的构造器函数，为什么在new这个Ctor上就能把占位符组件内部的正式的div标签拿到生成vnode。目前看代码没看出来。

Answer 1

ustbhuangyi 2020-06-30 19:45:14

举个例子，有一个嵌套组件：App 组件嵌套 Hellp 组件

Hello 组件模板如下 

<div class="hello">
  <p>Hello World </p>
</div>

App 组件模板如下：

<div class='app'>
    <p>This is an app</p>
   <hello></hello>
</div>

当执行 App 组件的 patch 的时候，遇到 hello 组件 vnode 节点，就会递归执行 hello 组件的初始化，也就是实例化 Hello 组件，那么 Hello 组件的 DOM 怎么生成的呢，是在 Hello 组件的 render 节点，因为模板会编译生成 render 函数，render 阶段执行 render 函数，就生成了对应的子树 vnode，也就是 Hello 组件内部 DOM 对应的 vnode，然后再执行 Hello 组件的 patch，把组件的 DOM 挂载上去。

• 慕粉4283821 #1

  老师你举的这个例子， app组件patch的时候， 进行 children 遍历的时候，对于createElm  传入的hello组件其实就是 hello 组件的占位符 vnode 了吧？