Vue3中对VDOM的改进

前言

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 class="header">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)
  }
}

上述函数是在模板编译成ast以后调用的生成VNode的函数，因此有patchFlag这个标志，若是是动态的节点，而且此时是开启了Block的话，就会将节点塞入Block中，这样 createBlock返回的 VNode 中就会有 dynamicChildren 了。

到此为止，经过本文中案例通过模板编译和render函数运行后并通过了优化之后生成了以下结构的vnode：

const result = {
  type: Symbol(Fragment),
  patchFlag: 64,
  children: [
    { type: 'span', patchFlag: -1, ...},
    {
      type: 'ul',
      patchFlag: 0,
      children: [
        { type: 'li', patchFlag: -1, ...},
        {
          type: Symbol(Fragment),
          children: [
            { type: 'li', patchFlag: 1 ...},
            { type: 'li', patchFlag: 1 ...}
          ]
        }
      ]
    }
  ],
  dynamicChildren: [
    {
      type: Symbol(Fragment),
      patchFlag: 128,
      children: [
        { type: 'li', patchFlag: 1 ...},
        { type: 'li', patchFlag: 1 ...}
      ]
    }
  ]
}

以上的 result 不完整，可是咱们暂时只关心这些属性。能够看见 result.children 的第一个元素是span，patchFlag=-1，且 result 有一个 dynamicChildren 数组，里面只包含了两个动态的 li，后续若是变更了数据，那么新的 vnode.dynamicChildren 会有第三个 li 元素。

patch

patch部分其实也没差多少，就是根据vnode的type执行不一样的patch操做：

function patchElement(n1, n2) {
  let { dynamicChildren } = n2
  // 一系列操做

  if (dynamicChildren) {
    patchBlockChildren (
      n1.dynamicChildren!,
      dynamicChildren,
      el,
      parentComponent,
      parentSuspense,
      areChildrenSVG
    )
  } else if (!optimized) {
    // full diff
    patchChildren(
      n1,
      n2,
      el,
      null,
      parentComponent,
      parentSuspense,
      areChildrenSVG
    )
  }
}

能够看见，若是有了 dynamicChildren 那么vue2.x版本中的diff操做就被替换成了 patchBlockChildren() 且参数只有 dynamicChildren，就是静态的不作diff操做了，而若是vue-next的patch中没有 dynamicChildren，则进行完整的diff操做，入注释写的 full diff 的后续代码。

结尾

本文没有深刻讲解代码的实现层面，一是由于本身实力不济还在阅读源码当中，二是我我的认为阅读源码不可钻牛角尖，从大局入眼，再徐徐图之，先明白了各个部分的做用后带着思考去阅读源码能收获到的应该更多一些。

诸君共勉。