疑问

Question

1、组件的_init()方法在什么时候执行的
2、组件的导乐mount()在什么时候执行的
3、组件的vnode、组件的_init()、组件的导乐mount()，这3个的执行顺序是什么？
谁第一个执行，谁第二个执行，谁第三个执行

---

通过调试：
第一、render应该是最先生成的，怎么生成的，反正不是源码生成的。
第二、生成vnode。
第三、执行组件的_init()方法
第四、执行组件的导乐mount()方法

一个大的疑问点是：
app.vue(爷)—a.vue(父)—b.vue(子)
是先把app.vue，a.vue，b.vue他们三个的vnode都生成后，最后统一update一下，统一patch一下
还是生成一个组件的vnode，update一下，patch一下

Answer 1

ustbhuangyi 2021-04-02 13:26:14

递归创建的过程，在 patch 的时候，遇到组件节点，递归执行子组件一套渲染流程（init->render->patch）

• 提问者 前端工程师666777888 #1

  老师的意思是：先把整个项目的vnode都生成  ， 而不是父子交叉生成vnode
  ___________________________________________________________________
  拿到整个vnode后，开始进行patch，如果遇到组件vnode，则执行组件的new Sub()，
  在执行new Sub()过程中，再执行组件的导乐mount()，完成组件渲染。
  组件渲染完成后，再渲染父组件

• ustbhuangyi 回复 提问者 前端工程师666777888 #2

  不是一次性生成整个项目的 vnode，每次 render 生成的是当前组件的所有 vnode，其实构造出的一颗 vnode tree，然后在 patch 阶段就是一个深度遍历这棵树的过程，创建生成 DOM 节点。当然在遍历过程遇到了组件节点，那么就会执行这个组件的初始化和渲染流程，渲染这个子组件的 vnode 树，遍历子组件的 vnode 树执行 patch，如此递归过程。