vue-next 对virtual dom的patch更新做了一系列的优化，从编译时加入了 block 以减少 vdom 之间的对比次数，另外还有 hoisted 的操作减少了内存的开销。本文写给自己看，做个知识点记录，如有错误，还请不吝赐教。
VDOM
VDOM的概念简单来说就是用js对象来模拟真实DOM树。由于MV**的架构，真实DOM树应该随着数据（Vue2.x中的data）的改变而发生改变，这些改变可能是以下几个方面：
v-if
v-for
动态的props（如:class，@click）
子节点的改变
等等
Vue框架要做的其实很单一：在用户改变数据时，正确更新DOM树，做法就是其核心的VDOM的patch和diff算法。
Vue2.x中的做法
在Vue2.x中，当数据改变后就要对所有的节点进行patch和diff操作。如以下DOM结构：
<div> <span>I'm header</span> <ul> <li>第一个静态li</li> <li v-for="item in mutableItems" :key="item.key"> {{ item.desc }}</li> </ul> </div>
在第一次mount节点的时候会去生成真实的DOM，此后如果
mutableItems.push({ key: 'asdf', desc: 'a new li item' })
预期的结果是页面出现新的一个li元素，内容就是 a new li item，Vue2.x中是通过patch时对 ul 元素对应的 vnode 的 children 来进行 diff 操作，具体操作在此不深究，但是该操作是需要比较所有的 li 对应的 vnode 的。
不足
正是由于2.x版本中的diff操作需要遍历所有元素，本例中包括了 span 和 第一个li元素，但是这两个元素是静态的，不需要被比较的，不论数据怎么变，静态元素都不会再更改了。vue-next在编译时对这种操作做了优化，即 Block。
Block
入上述模板，在vue-next中生成的渲染函数为：
const _Vue = Vue const { createVNode: _createVNode } = _Vue const _hoisted_1 = _createVNode("span", { class: "header" }, "I'm header", -1 /* HOISTED */) const _hoisted_2 = _createVNode("li", null, "第一个静态li", -1 /* HOISTED */) return function render(_ctx, _cache) { with (_ctx) { const { createVNode: _createVNode, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString } = _Vue return (_openBlock(), _createBlock(_Fragment, null, [ _hoisted_1, _createVNode("ul", null, [ _hoisted_2, (_openBlock(true), _createBlock(_Fragment, null, _renderList(state.mutableItems, (item) => { return (_openBlock(), _createBlock("li", { key: item.key }, _toDisplayString(item.desc), 1 /* TEXT */)) }), 128 /* KEYED_FRAGMENT */)) ]) ], 64 /* STABLE_FRAGMENT */)) } }
我们可以看到调用了 openBlock 和 createBlock 方法，这两个方法的代码实现也很简单：
const blockStack: (VNode[] | null)[] = [] let currentBlock: VNode[] | null = null let shouldTrack = 1 // openBlock export function openBlock(disableTracking = false) { blockStack.push((currentBlock = disableTracking ? null : [])) } export function createBlock( type: VNodeTypes | ClassComponent, props?: { [key: string]: any } | null, children?: any, patchFlag?: number, dynamicProps?: string[] ): VNode { // avoid a block with patchFlag tracking itself shouldTrack-- const vnode = createVNode(type, props, children, patchFlag, dynamicProps) shouldTrack++ // save current block children on the block vnode vnode.dynamicChildren = currentBlock || EMPTY_ARR // close block blockStack.pop() currentBlock = blockStack[blockStack.length - 1] || null // a block is always going to be patched, so track it as a child of its // parent block if (currentBlock) { currentBlock.push(vnode) } return vnode }
更加详细的注释还请看源代码中的注释，写的十分详尽，便于理解。这里面 openBlock 就是初始化一个块，createBlock 就是对当前编译的内容生成一个块，这里面的这一行代码：vnode.dynamicChildren = currentBlock || EMPTY_ARR 就是在收集动态的子节点，我们可以再看一下编译时运行的函数：
// createVNode function _createVNode( type: VNodeTypes | ClassComponent, props: (Data & VNodeProps) | null = null, children: unknown = null, patchFlag: number = 0, dynamicProps: string[] | null = null ) { /** * 一系列代码 **/ // presence of a patch flag indicates this node needs patching on updates. // component nodes also should always be patched, because even if the // component doesn't need to update, it needs to persist the instance on to // the next vnode so that it can be properly unmounted later. if ( shouldTrack > 0 && currentBlock && // the EVENTS flag is only for hydration and if it is the only flag, the // vnode should not be considered dynamic due to handler caching. patchFlag !== PatchFlags.HYDRATE_EVENTS && (patchFlag > 0 || shapeFlag & ShapeFlags.SUSPENSE || shapeFlag & ShapeFlags.STATEFUL_COMPONENT || shapeFlag & ShapeFlags.FUNCTIONAL_COMPONENT) ) { currentBlock.push(vnode) } }