准备工作在vue源码下执行npm run dev-compiler，打开/packages/template-explorer/index.html;
屏幕快照 2022-02-17 上午10.47.44.png
控制台可以左边写代码，右边观察渲染函数，打开控制台还可以看到AST，很方便查看三者之间的关系
1、静态节点提升
如果是静态的，则直接会储存起来后期不再生成，即hoiststatic,所谓内存换时间；
补丁标记和动态属性记录
第一个p标签的title是动态的，多了一个二进制数字8(1000)，只要第4位是1，就知道动态属性props, 在vue2中会对节点的所有属性做更新，因为vue2没有做标记；缓存事件处理程序
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))尝试从_cache中拿事件处理函数，如果第一次则创建缓存起来；因为每次rander的时候拿到的onClick函数都是相同的，所以不会认为这个属性发生变化，不会导致组件的频繁更新；类似于react中的回调函数的优化,比如useCallback；
- block块优化
比如div内部谁是动态的，将来则会放在生成的虚拟DOM的dynamicProps和dynamicChildren中，下次做更新不去向下递归，只把dynamicChildren标记的做更新
shapFlags
export const enum ShapeFlags {
ELEMENT = 1,
FUNCTIONAL_COMPONENT = 1 << 1,//左移运算，二进制10 => 2
STATEFUL_COMPONENT = 1 << 2,
TEXT_CHILDREN = 1 << 3,
ARRAY_CHILDREN = 1 << 4,
SLOTS_CHILDREN = 1 << 5,
TELEPORT = 1 << 6,
SUSPENSE = 1 << 7,
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
COMPONENT_KEPT_ALIVE = 1 << 9,
COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
}
