# 前言

在开启本篇章之前，我们先来思考一个问题，假设有以下模板：

html
复制代码<template>
  <p>hello world</p>
  <p>{{ msg }}</p>
</template>>

@前端进阶之旅: 代码已经复制到剪贴板

其中一个 p 标签的节点是一个静态的节点，第二个 p 标签的节点是一个动态的节点，如果当 msg 的值发生了变化，那么理论上肉眼可见最优的更新方案应该是只做第二个动态节点的 diff，而无需进行第一个 p 标签节点的 diff。

如果熟悉 Vue 2.x 的小伙伴可能会知道，在 Vue 2.x 版本中在编译过程中有一个叫做 optimize 的阶段，会进行标记静态根节点的操作，被标记为静态根节点的节点，一方面会生成一个 staticRenderFns，首次渲染会以这个静态根节点 vnode 进行缓存，后续渲染会直接取缓存中的，从而避免重复渲染；另一方面生成的 vnode 会带有 isStatic = true 的属性，将会在 diff 过程中被跳过。但 Vue 2.x 对静态节点进行缓存就是一种空间换时间的优化策略，为了避免过度优化，在 Vue 2.x 中，识别静态根节点是需要满足：

子节点是静态节点；
子节点不是只有一个静态文本节点的节点。

所以，上面的示例第一个 p 标签在 Vue 2.x 中不会被判定位静态根节点，也就无法进行优化。

关于 Vue 2.x 如何做的编译时优化，这里只是简单进行了介绍，想了解更多的小伙伴可以参考这里：入口开始，解读 Vue2 源码（七）—— $mount 内部实现 — compile optimize标记节点。

那么 Vue 3 呢？还是和 Vue 2 一样吗？答案显然是否定的，首先我们前面介绍了对于静态的节点，Vue 3 首先会进行静态提升，也就是相当于缓存了静态节点的 vnode，那 diff 过程呢？会跳过吗？本小节我们来一探究竟。

# PatchFlags

# 是什么？

首先，我们需要认识一个 PatchFlags 这个属性，它是一个枚举类型，里面是一些二进制操作的值，用来标记在节点的 patch 类型。具体的枚举内容如下：

export const enum PatchFlags {
  // 动态文本的元素
  TEXT = 1,

  // 动态 class 的元素
  CLASS = 1 << 1,

  // 动态 style 的元素
  STYLE = 1 << 2,

  // 动态 props 的元素
  PROPS = 1 << 3,

  // 动态 props 和有 key 值绑定的元素
  FULL_PROPS = 1 << 4,

  // 有事件绑定的元素
  HYDRATE_EVENTS = 1 << 5,

  // children 顺序确定的 fragment
  STABLE_FRAGMENT = 1 << 6,

  // children 中有带有 key 的节点的 fragment
  KEYED_FRAGMENT = 1 << 7,

  // 没有 key 的 children 的 fragment
  UNKEYED_FRAGMENT = 1 << 8,

  // 带有 ref、指令的元素
  NEED_PATCH = 1 << 9,

  // 动态的插槽
  DYNAMIC_SLOTS = 1 << 10,

  // 静态节点
  HOISTED = -1,

  // 不是 render 函数生成的元素，如 renderSlot
  BAIL = -2,
}

@前端进阶之旅: 代码已经复制到剪贴板

这些二进制的值是通过左移操作符 << 生成的，关于左移操作符，我们在《响应式原理：副作用函数探秘》篇章中已经介绍过了，在这里也是一种二进制操作的体现：

TEXT = 0000000001;
CLASS = 0000000010;
STYLE = 0000000100;

@前端进阶之旅: 代码已经复制到剪贴板

这里通过二进制来表示 PatchFlags 可以方便我们做很多属性的判断，比如 TEXT | STYLE 来得到 0000000101，表示 patchFlag 既有 TEXT 属性也有 STYLE 属性，当需要进行判断有没有 STYLE 属性时，只需要 FLAG & STYLE > 0就行。

# 什么时候生成的？

在搞清楚 patchFlags 的一些定义和使用基础后，那它是什么时候被赋值到 vnode 节点上的呢？前言中的模板字符串在 compiler 阶段会被转成一个 render 函数的字符串代码：

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createElementVNode("p", null, "hello world", -1 /* HOISTED */)

export function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _hoisted_1,
    _createElementVNode("p", null, _toDisplayString(msg), 1 /* TEXT */)
  ], 64 /* STABLE_FRAGMENT */))
}

@前端进阶之旅: 代码已经复制到剪贴板

这里可以看出，render 函数内是通过 createElementVNode 方法来创建 vnode 的，该函数的第四个参数就代表着 patchFlag。对于我们上面的示例，其中 <p>hello world</p> 是 hoisted，对应的 patchFlag = -1，<p>{{ msg }}</p> 是动态文字节点，对应的 patchFlag = 1。

# 有什么用？

接下来看看其实际使用案例，还是拿之前的 patchElement 函数来说：

const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
  let { patchFlag, dynamicChildren, dirs } = n2
  // 如果 patchFlag 不存在，那么就设置成 FULL_PROPS，意味着要全量 props 比对
  patchFlag |= n1.patchFlag & PatchFlags.FULL_PROPS
  const oldProps = n1.props || EMPTY_OBJ
  const newProps = n2.props || EMPTY_OBJ

  const areChildrenSVG = isSVG && n2.type !== 'foreignObject'
  if (dynamicChildren) {
    patchBlockChildren(
      n1.dynamicChildren!,
      dynamicChildren,
      el,
      parentComponent,
      parentSuspense,
      areChildrenSVG,
      slotScopeIds
    )
  } else if (!optimized) {
    // full diff
    patchChildren(
      n1,
      n2,
      el,
      null,
      parentComponent,
      parentSuspense,
      areChildrenSVG,
      slotScopeIds,
      false
    )
  }

  if (patchFlag > 0) {
    if (patchFlag & PatchFlags.FULL_PROPS) {
      // 如果元素的 props 中含有动态的 key，则需要全量比较
      patchProps(
        el,
        n2,
        oldProps,
        newProps,
        parentComponent,
        parentSuspense,
        isSVG
      )
    } else {
      // class
      if (patchFlag & PatchFlags.CLASS) {
        if (oldProps.class !== newProps.class) {
          hostPatchProp(el, 'class', null, newProps.class, isSVG)
        }
      }
      // style
      if (patchFlag & PatchFlags.STYLE) {
        hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG)
      }

      // props
      if (patchFlag & PatchFlags.PROPS) {
        const propsToUpdate = n2.dynamicProps!
        for (let i = 0; i < propsToUpdate.length; i++) {
          const key = propsToUpdate[i]
          const prev = oldProps[key]
          const next = newProps[key]
          // #1471 force patch value
          if (next !== prev || key === 'value') {
            hostPatchProp(
              el,
              key,
              prev,
              next,
              isSVG,
              n1.children as VNode[],
              parentComponent,
              parentSuspense,
              unmountChildren
            )
          }
        }
      }
    }

    // text
    if (patchFlag & PatchFlags.TEXT) {
      if (n1.children !== n2.children) {
        hostSetElementText(el, n2.children as string)
      }
    }
  } else if (!optimized && dynamicChildren == null) {
    patchProps(
      el,
      n2,
      oldProps,
      newProps,
      parentComponent,
      parentSuspense,
      isSVG
    )
  }

}

@前端进阶之旅: 代码已经复制到剪贴板

这里涉及到两个比较重点的事儿，一个是和 dynamicChildren 相关，另一个是和动态 props 相关。我们先看和动态 props 相关的内容。

之前的章节我们跳过了对 PatchFlags 内容的理解，到了这里，我们通过代码可以知道 Vue 在更新子节点时，首先也是利用 patchFlag 的能力，对子节点进行分类做出不同的处理，比如针对以下例子：

html
复制代码<template>
  <div :class="classNames" id='test'>
    hello world
  </div>
</template>

@前端进阶之旅: 代码已经复制到剪贴板

得到的编译结果：

此时 patchFlag & PatchFlags.CLASS > 0 则在 diff 过程中，需要进行 class 属性的 diff，从而减少了对 id 属性的不必要 diff，提升了 props diff 过程中的性能。

# dynamicChildren

另外，我们注意到，在编译后的 render 函数中会有一个 _openBlock() 函数的执行，我们来一起看一下其实现：

然后我们接着看 createElementBlock 的实现：

# 总结

有了上面的一些介绍，我们还是回到前言的例子中：

编译器-编译过程中的优化细节|Vue3原理

编译器-编译过程中的优化细节|Vue3原理