疑问

来源：3-2 createComponent

前端工程师666777888

2021-04-02

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一下

写回答

1回答

ustbhuangyi

2021-04-02

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

ustbhuangyi

前端工程师666777888

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

2021-04-03

共2条回复

Vue.js 源码深入解析深入理解Vue实现原理

全方位讲解 Vue.js 源码，进阶高级工程师

4984 学习 · 1037 问题

查看课程

相似问题

data.call(vm.vm) 把组件实例传给 data 函数的疑问

回答 2

计算属性和watch 的疑问

回答 4

老师，关于defineReactive的一点疑问

回答 2

Vue.set 设置不存在属性为响应式数据问题

回答 1

关于watcher、dep疑问

回答 1

打开慕课网App查看更多内容