和 会被提升，只对

进行比较，大大减少了工作量。

• Block Tree (块树): Vue 3 会将动态节点组织成一棵“块树”。更新时，只需要遍历这棵更小的动态节点树，而不是整个 VDOM 树。
• Patch Flags (补丁标志): 编译器会给动态节点打上标记（flag），标明该节点哪些部分可能会变化（如文本、class、props、事件器等）。在 diff 阶段，Vue 可以根据这些标志跳过不必要的比较，直接执行特定的更新操作。

<p :class="className">{{ message }}p>

编译器会知道这个

元素可能变化的部分是 class 和文本内容，并打上相应的 flag。更新时就不会去检查它的 id 或其他不变的属性。

B. 更高效的 Diff 算法

虽然核心思想仍是双端 Diff，但 Vue 3 的实现更加优化，尤其是在处理列表更新时。

• 快速路径 (Fast Paths) for List Updates: 对于一些常见的列表更新模式（如在末尾添加元素、替换整个列表等），Vue 3 提供了专门的快速路径算法，避免了复杂的最长递增子序列计算。
• 更精确的移动策略: 在处理列表项顺序改变时，Vue 3 的算法能更精确地判断哪些元素需要移动，哪些可以就地复用，从而减少 DOM 操作次数。

总结 VDOM 性能提升体现：

• 更快的初始渲染： 静态节点提升和块树优化减少了首次渲染的计算量。
• 更快的状态更新： Patch flags 和优化的 Diff 算法减少了状态变更时的比较和更新开销。
• 更少的内存占用： Block tree 结构和静态提升减少了运行时需要跟踪的节点数量。

2.静态提升和pathflag例子

<template>
  <div id="app">
    <h1 class="title">Welcome to My Apph1>
    <p>{{ greeting }}p>
    <ul>
      <li>Static Item 1li>
      <li>Static Item 2li>
      <li>{{ dynamicItem }}li> 
    ul>
    <button @click="changeGreeting">Change Greetingbutton>
  div>
template>

<script setup>
import { ref } from 'vue';

const greeting = ref('Hello Vue 3!');
const dynamicItem = ref('Dynamic Item 3');

const changeGreeting = () => {
  greeting.value = 'Greetings from Vue 3!';
};
script>

编译器分析和优化过程：

1. 识别静态节点:

• • Welcome to My App

    ：标签名、内容、class 属性都不变，是静态节点。
  • Static Item 1
  和
  • Static Item 2
  ：标签名和内容都不变，是静态节点。
  • ：标签名、内容和事件处理器（@click）都不变，是静态节点。

2. 识别动态节点:

• • {{ greeting }}

    ：内容 {{ greeting }} 是动态的。
  • {{ dynamicItem }}
  ：内容 {{ dynamicItem }} 是动态的。
  • ：虽然 id 是静态的，但它包含了动态子节点，因此自身是动态的。

3. 执行静态提升:

• • 编译器会将上面识别出的静态节点的 VNode 对象创建代码提取出来，放在渲染函数外面，通常赋值给一个变量（比如 _hoisted_1, _hoisted_2 等）。这样它们只会被创建一次。

4. 添加 Patch Flags:

• • 节点：它的内容是动态的，编译器会为其 VNode 添加 patchFlag: Text (数值通常是 1)。这告诉运行时，只需要比较和更新它的文本内容。

  • {{ dynamicItem }}
  节点：它的内容是动态的，同样会添加 patchFlag: Text (数值通常是 1)。
  • 节点：它的子节点列表是动态的（因为包含动态的
    • ），编译器会为其添加 patchFlag: Children (数值通常是 8 或更复杂的组合)。这告诉运行时，需要对其子节点进行 diff。

  编译后生成的渲染函数（简化示意）：

  import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString } from 'vue'
  
  // --- 静态提升的 VNodes ---
  // 这些 VNodes 只在模块加载时创建一次，后续渲染直接复用
  const _hoisted_1 = /*#__PURE__*/_createElementVNode("h1", { class: "title" }, "Welcome to My App", -1 /* HOISTED */)
  const _hoisted_2 = /*#__PURE__*/_createTextVNode("Static Item 1")
  const _hoisted_3 = /*#__PURE__*/_createTextVNode("Static Item 2")
  const _hoisted_4 = /*#__PURE__*/_createElementVNode("button", { onClick: "changeGreeting" }, "Change Greeting", -1 /* HOISTED */)
  // -----------------------------------
  
  function render(_ctx, _cache, $props, $setup, $data, $options) {
    // `_ctx` 通常包含 `greeting` 和 `dynamicItem` 等响应式数据
    return (_openBlock(), _createBlock("div", { id: "app" },
      [
        _hoisted_1, // 直接复用，无需 diff
        _createElementVNode("p", null, _toDisplayString($setup.greeting), 1 /* TEXT */), // patchFlag: 1
        _createElementVNode("ul", null, [
          _hoisted_2, // 直接复用，无需 diff
          _hoisted_3, // 直接复用，无需 diff
          _createElementVNode("li", null, _toDisplayString($setup.dynamicItem), 1 /* TEXT */) // patchFlag: 1
        ], 16 /* FULL_PROPS */), // patchFlag: 16 (这里可能表示子节点是动态的，需要 diff)
        _hoisted_4  // 直接复用，无需 diff
      ]
    ))
  }
  

  关键点解读:

  • _hoisted_1, _hoisted_2, _hoisted_3, _hoisted_4：这些都是在编译时创建好的静态 VNode 对象。/* HOISTED */ 注释表明它们被提升了。在运行时，渲染函数直接使用这些对象，而不必每次都重新创建。
  • _createElementVNode("p", ...) 和 _createElementVNode("li", ...)：这些是动态节点，每次渲染时都需要重新创建 VNode。
  • 1 /* TEXT */：这就是 patchFlag。它告诉运行时，这个 VNode 只需要关心文本内容的变化。当 $setup.greeting 或 $setup.dynamicItem 改变时，运行时只需比较新旧文本字符串，然后更新真实 DOM 的 textContent，而不需要比较 class、id 等其他属性。
  • 16 /* FULL_PROPS */ (或类似的数值)：
    的 patchFlag 表明其子节点是动态的，需要进行子节点的 diff。

    通过这种方式，Vue 3 在编译时就对模板进行了深度优化，使得运行时的渲染和更新过程更加高效