这块有点麻烦,总结了一下过程老师您看对不

来源:3-5 patch(下)

小学生6年级

2020-03-09

假设组件A 下面有三个 child [‘普通’, ‘普通’, 组件B]

现在 A 已经通过 render 生成了渲染 vnode,并在 _updateComponent 中开始 patch(即开始生成真的 DOM)【1】。

  1. 在 patch 函数中将会 createChildren(创建并真正将每一个 child 插入到父 DOM 上),也就是对每一个 child 执行 createElem ->
  2. 在 createElem 中,若这个 child 为占位符 vnode,则进入 createComponent 方法,若不是则直接生成 DOM 并插入到父节点 ->
  3. 调用占位符 vnode 的 init 函数,实例化这个 vnode ->
  4. 在 init 函数中调用 mount 方法 ->
  5. new 一个渲染 watcher ->
  6. 渲染 watcher 的特性:即在初始化时会调用回调函数,回调函数中通过 render 生成渲染 vnode,并在 _updateComponent 中开始 patch(即开始生成真的 DOM)【1】

一直到 【1】 处也就形成了一个递归。 在这边提问主要也是想给学习的小伙伴们一个参考,感觉这样子递归的一个过程列出来就很清晰了,当然这个递归的出口很简单,就是在上述第二步没有占位符 vnode 的时候。

写回答

1回答

ustbhuangyi

2020-03-09

其实就是在 patchElm 过程中如果遇到了一个组件 vnode(也就是你说的占位符 vnode),就是一个递归创建子组件的过程了,这也是树的深度遍历的方式,通过这种方式很容易实现嵌套组件的渲染了。

0
1
小学生6年级
非常感谢!
2020-03-09
共1条回复

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

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

4984 学习 · 1037 问题

查看课程