源码分析

vue3源码最核心的部分：

• reactivity
• compiler-core
• runtime-core
• runtime-dom

reactivity

• 响应式原理 reactive 的实现
• ref 和 computed 的实现
• effect 里面使用 track 依赖收集和 trigger 触发依赖
• dep 存储 effect

compiler-core

• 把 template 字符串调用 baseParse 成 ast，再调用 generate 生成 render 函数
• 解析插值，解析 element，解析 text

runtime-core

• 实现 render => patch
• setup 可获取 props 和 context
• 实现 component emit，props，slots
• 创建 vnode
• 实现 provide/inject
• 实现 nextTick （里面使用 Promise 实现）
• patch 里面实现 diff 算法

runtime-dom

• 实现 createElement 函数逻辑

diff 算法更新

• 对比新旧节点头部相同指针的节点，相同则进行diff，不同则跳转下一步。
• 对比新旧节点尾部指针指向节点，相同则进行diff，不同则跳转下一步。
• 此时剩余新旧节点，可能存在乱序、已移除或新增的情况，进行特殊处理来更新。

对比 vu2 :

vue3 在 diff 算法中相比 vue2 增加了静态标记, patch 过程中就会判断这个标记来 Diff 优化流程，跳过一些静态节点对比