vue3在线编译器
一. 编译过程
- 先将模板进行分析，生成对应的
AST树（用来描述语法的对象） - 转化流程
transform：对动态节点做一些标记（指令、插槽、事件、属性等）--patchFlag - 生成代码
codegen：生成最终代码
二. Block Tree
2.1 Block的概念
diff算法的特点就是递归，每次比较同一层，进行全量比对
block的作用就是为了收集动态节点（收集自己下面的所有的）- 将树的递归拍平成一个数组了
- 在
createVNode的时候，会判断这个节点是动态的，就让外层的block收集起来 - 目的是为了
diff的时候只diff动态节点
如果会影响结构的，都会标记成
block
v-if、v-else- 父亲也会收集儿子
block,多个节点组成block tree - 改变结构也要封装到
block中，我们期望的更新是拿以前的和现在的去比，靶向更新，如果前后节点个数不一致，那只能全部比较
三. patchFlag对不同节点进行描述
标识要比对那些类型，原理是利用
JS的位运算
四. 其他优化
4.1 静态提升
- 每次渲染，都要创建虚拟节点，createVNode
- 静态提升，静态节点进行提取
4.2 事件缓存
- 缓存事件，防止重新创建事件
4.3 jsx & template
jsx是为了灵活（没有优化），template是为了简单（模板编译优化）
五. Vue3和Vue2的对比
monorepo代码管理方式- 响应式原理
defineProperty->proxy - API：
options Api->composition Api，支持treeShaking - Vue3
diff算法根据patchFlag进行diff，Vue2进行全量diff - Vue3中采用
最长递增子序列 Fragment对多个根节点进行支持，Teleport、Suspense、Keep-alive、transition- Vue3采用
TypeScript、Vue2采用Flow - 自定义渲染器
createRenderer()，传入自己的渲染方法，好处是可以根据vue的核心来实现不同平台的代码 - 模板编译优化
