简要流程

Question

toggle => setter => app组件渲染watcher update => nextTick => watcher.run => get => updateComponent => _.update => app组件渲染vnode patch => sameNode => patchVnode => children 不相等 => updateChildren => startVnode相同 => patchVnodecomponent组件占位符节点 => prepatch => updateChildComponent => update props => prop setter => helloworld 组件 进入 queue => prepatch 完成 => patchVnode (button ) => patchVnode文本节点toggle => app组件patch完成 => watcher.run()完成 => next quene

helloworld组件 渲染watcher执行run方法 => get => updateComponent => _.update => vnode patch => patchVnode => updateChildren (div 与 ul 的diff) => 进入 while循环 的 else => 创建新节点 => 移除旧节点 => patch完成 => run 完成

打断点调试了一下更加清晰了总结一下

• 组件初始化时 渲染watcher 会订阅这些响应式依赖 比如 app组件的渲染watcher 订阅了data 中的 flag helloworld组件订阅了 props 中的 flag。
• 在组件更新时flag 变化触发了 setter 由于是在app组件中更新的触发了app组件渲染watcher 更新渲染watcher 在nextTick 执行 run 方法(标记 flushing 为 true )就会触发 watcher的getter 从而进行 render => patch 的过程比对新老节点。在更新子组件(updateChildComponent)时对helloworld组件的flag prop 进行更新时触发了 helloworld 渲染 watcher。 此时 由于 flushing 为 true 渲染watcher 会进入当前queue 所以 父子组件更新是在一个 tick 内。app组件patch完成之后就轮到 helloworld组件了 helloworld 渲染 watcher 执行 run方法也会走app组件上面的流程和 app组件的区别 其实就是 patchVnode 的过程 这里会创建新节点移除旧节点。

老师 帮忙看下 总结得有没有问题 。 谢谢老师

Answer 1

ustbhuangyi 2020-12-30 17:36:11

总结的很好，如果画成流程图记下来就更棒啦

• 提问者 慕粉4283821 #1

  非常感谢！嗯嗯， 下次用流程图记录 。

• 常安Jy #2

  有问题吧  hello word 内的更新没走patchNode 方法吧 走的是创建 删除 流程吧老师