第二章 runtime-core初始化核心流程和runtime-core更新核心流程

runtime-core初始化核心流程

1 创建app

2 进行初始化

2.1 基于组件生成虚拟节点

2.2 进行render 调用patch 根据不同的vnode类型进行不同类型的组件处理

组件

2.2.1 创建component instance对象

2.2.2 setup component 初始化props slots 各种

2.2.3 setupRenderEffect 调用render函数生成虚拟节点 然后再递归调用patch

元素

2.2.1 调用hostCreateElement创建真实的element(其实也是对document.createElement等api进行了封装)，对这些element元素进行渲染

2.2.2 递归patch处理children节点

总结: 其实就是对组件进行拆箱，不断patch的过程，然后遇到element元素就把它们渲染出来。

组件处理导图：

元素处理导图：

runtime-core更新核心流程

响应式的值变了 - 触发当前组件的effect函数执行(instance.update方法执行)

1. 再次执行当前组件render函数，获取最新的vnode
2. 重新patch调用对比新老节点
   2.1 文本text，直接更改text类型的值
   2.2 数组，依次对比，props 然后就是children，然后就是最总要的diff算法对比需要对节点进行的操作(diff算法那在后续也会再进行补充)

总结：当响应式数据变化的时候，会触发更新的流程，通过diff算法patch对比新旧节点值来进行更新！

导图：