1
<template>
2
  <div>
3
    <h1>Hello Vue</h1>
4
    <p>这是一段静态文本</p>
5
    <span>{{ message }}</span>
6
  </div>
7
</template>

1
// Vue2 编译产物
2
function render() {
3
  with (this) {
4
    return _c('div', [
5
      _c('h1', [_v("Hello Vue")]),
6
      _c('p', [_v("这是一段静态文本")]),
7
      _c('span', [_v(_s(message))])
8
    ])
9
  }
10
}

1
// Vue2 的 patch 过程（简化）
2
function patch(oldVNode, newVNode) {
3
  // 即使是静态节点，也要走完整个比较流程
4
  if (oldVNode.tag !== newVNode.tag) {
5
    replaceNode(oldVNode, newVNode)
6
    return
7
  }
8
  // 比较 props —— 静态节点也要比较
9
  updateProps(oldVNode, newVNode)
10
  // 比较 children —— 静态节点也要比较
11
  updateChildren(oldVNode.children, newVNode.children)
12
}

1
<template>
2
  <div>
3
    <h1>Hello Vue</h1>
4
    <p>这是一段静态文本</p>
5
    <span :class="cls">{{ message }}</span>
6
  </div>
7
</template>

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

3
const _hoisted_1 = /*#__PURE__*/_createElementVNode("h1", null, "Hello Vue", -1 /* HOISTED */)
4
const _hoisted_2 = /*#__PURE__*/_createElementVNode("p", null, "这是一段静态文本", -1 /* HOISTED */)
5

6
export function render(_ctx, _cache, $props, $setup, $data, $options) {
7
  return (_openBlock(), _createElementBlock("div", null, [
8
    _hoisted_1,
9
    _hoisted_2,
10
    _createElementVNode("span", {
11
      class: _normalizeClass(_ctx.cls)
12
    }, _toDisplayString(_ctx.message), 3 /* TEXT, CLASS */)
13
  ]))
14
}

1
// 判断是否包含某个标记
2
if (patchFlag & PatchFlags.CLASS) {
3
  // 有动态 class
4
}
5

6
// 组合多个标记
7
const flag = PatchFlags.TEXT | PatchFlags.CLASS  // 3
8

9
// 判断是否是纯文本更新
10
if (patchFlag === PatchFlags.TEXT) {
11
  // 只需更新文本，最快路径
12
}

1
// 这两个 VNode 在模块加载时创建一次，之后每次渲染都复用
2
const _hoisted_1 = /*#__PURE__*/_createElementVNode("h1", null, "Hello Vue", -1)
3
const _hoisted_2 = /*#__PURE__*/_createElementVNode("p", null, "这是一段静态文本", -1)
4

5
export function render(_ctx, _cache) {
6
  return (_openBlock(), _createElementBlock("div", null, [
7
    _hoisted_1,  // 直接引用，不重新创建
8
    _hoisted_2,  // 直接引用，不重新创建
9
    // ... 动态节点
10
  ]))
11
}

1
function patch(n1, n2, container) {
2
  // 如果新旧节点是同一个引用，直接跳过
3
  if (n1 === n2) {
4
    return
5
  }
6
  // ...
7
}

1
<template>
2
  <div>
3
    <section>
4
      <h2>关于我们</h2>
5
      <p>我们是一家科技公司</p>
6
      <p>成立于 2020 年</p>
7
    </section>
8
    <span>{{ dynamicText }}</span>
9
  </div>
10
</template>

1
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(
2
  "<section><h2>关于我们</h2><p>我们是一家科技公司</p><p>成立于 2020 年</p></section>",
3
  1
4
)
5

6
export function render(_ctx, _cache) {
7
  return (_openBlock(), _createElementBlock("div", null, [
8
    _hoisted_1,
9
    _createElementVNode("span", null, _toDisplayString(_ctx.dynamicText), 1 /* TEXT */)
10
  ]))
11
}

1
<template>
2
  <div id="app" class="container">
3
    <span :title="tip">{{ msg }}</span>
4
  </div>
5
</template>

1
const _hoisted_1 = { id: "app", class: "container" }
2

3
export function render(_ctx, _cache) {
4
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
5
    _createElementVNode("span", { title: _ctx.tip }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["title"])
6
  ]))
7
}

1
div
2
├── h1 (静态) ← 仍然需要访问
3
├── section (静态)
4
│   ├── p (静态) ← 仍然需要访问
5
│   └── p (静态) ← 仍然需要访问
6
├── p (静态) ← 仍然需要访问
7
└── span (动态) ← 实际需要更新的只有这个

1
// VNode 结构（简化）
2
interface VNode {
3
  type: string | Component
4
  props: Record<string, any> | null
5
  children: VNodeChild
6
  patchFlag: number
7
  dynamicChildren: VNode[] | null  // Block 独有！
8
}

1
export function createElementVNode(
2
  type: string,
3
  props?: any,
4
  children?: unknown,
5
  patchFlag?: number
6
) {
7
  const vnode = createBaseVNode(type, props, children, patchFlag)
8
  // 关键：如果有 patchFlag 且当前正在收集，则加入 dynamicChildren
9
  if (patchFlag > 0 && currentBlock) {
10
    currentBlock.push(vnode)
11
  }
12
  return vnode
13
}

1
<template>
2
  <div>
3
    <h1>标题</h1>
4
    <p>段落 1</p>
5
    <p>段落 2</p>
6
    <!-- ... 假设有 100 个静态段落 ... -->
7
    <p>段落 100</p>
8
    <span>{{ message }}</span>
9
    <button @click="handleClick" :disabled="loading">
10
      {{ buttonText }}
11
    </button>
12
  </div>
13
</template>

1
<template>
2
  <div>
3
    <p v-if="show">条件内容</p>
4
    <ul>
5
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
6
    </ul>
7
    <span>{{ msg }}</span>
8
  </div>
9
</template>