Vue 编译流程 (Compiler)

问题：开发者不想手写 DOM 操作，但浏览器只认识真实 DOM

手写 DOM 操作 → 繁琐、容易出错、难以维护
直接操作真实 DOM → 无法批量优化、无法跨平台

解决：模板 → 编译器 → 渲染函数 → 虚拟 DOM → diff → 真实 DOM

开发者写模板（声明式）→ 编译器转换为渲染函数（命令式）→ 运行时处理 diff 和 DOM 更新

// packages/shared/src/patchFlags.ts
export const enum PatchFlags {
  TEXT = 1, // 动态文本内容
  CLASS = 1 << 1, // 动态 class
  STYLE = 1 << 2, // 动态 style
  PROPS = 1 << 3, // 动态属性（非 class/style）
  FULL_PROPS = 1 << 4, // 有动态 key 的属性（需要完整比较）
  HYDRATE_EVENTS = 1 << 5, // 有事件监听器
  STABLE_FRAGMENT = 1 << 6, // 稳定的 Fragment（子节点顺序不变）
  KEYED_FRAGMENT = 1 << 7, // 有 key 的 Fragment
  UNKEYED_FRAGMENT = 1 << 8, // 没有 key 的 Fragment
  NEED_PATCH = 1 << 9, // 需要非 props 的 patch
  DYNAMIC_SLOTS = 1 << 10, // 动态 slot
}

// 编译时：组合标记
// <div :class="cls" :style="sty">Hello</div>
// 编译器生成：PatchFlag.CLASS | PatchFlag.STYLE = 2 | 4 = 6

// 运行时：检查标记
if (patchFlag & PatchFlags.CLASS) {
  // 6 & 2 = 2 → truthy
  // 只更新 class
}
if (patchFlag & PatchFlags.STYLE) {
  // 6 & 4 = 4 → truthy
  // 只更新 style
}
if (patchFlag & PatchFlags.TEXT) {
  // 6 & 1 = 0 → falsy
  // 跳过文本更新
}

// 编译后的代码（简化）
const _hoisted_1 = createElementVNode("h1", null, "Hello");

function render() {
  return (
    openBlock(),
    createElementBlock("div", null, [
      _hoisted_1, // 静态节点，不进入 dynamicChildren
      createElementVNode(
        "span",
        { class: normalizeClass(ctx.cls) },
        toDisplayString(ctx.msg),
        3 /* TEXT | CLASS */,
      ), // 动态节点，进入 dynamicChildren
    ])
  );
}

// 运行时的 openBlock + createBlock
let currentBlock = null;

function openBlock() {
  currentBlock = []; // 初始化空数组，收集动态节点
}

function createVNode(type, props, children, patchFlag) {
  const vnode = { type, props, children, patchFlag };
  if (patchFlag > 0 && currentBlock) {
    currentBlock.push(vnode); // 有 PatchFlag 的节点被收集
  }
  return vnode;
}

function createElementBlock(type, props, children) {
  const vnode = createVNode(type, props, children);
  vnode.dynamicChildren = currentBlock; // 赋值扁平化的动态节点数组
  currentBlock = null; // 清空
  return vnode;
}

// packages/runtime-core/src/renderer.ts（简化）
function patchElement(oldVNode, newVNode) {
  const el = (newVNode.el = oldVNode.el);
  const oldChildren = oldVNode.children;
  const newChildren = newVNode.children;

  if (newVNode.dynamicChildren) {
    // 有 dynamicChildren：只遍历动态节点
    patchBlockChildren(oldVNode.dynamicChildren, newVNode.dynamicChildren);
  } else {
    // 没有 dynamicChildren：全量 diff
    patchChildren(oldVNode, newVNode, el);
  }
}

// 编译前的模板
<div>
  <h1>Hello</h1>     <!-- 完全静态 -->
  <span>{{ msg }}</span>  <!-- 动态 -->
</div>

// 编译后的代码
const _hoisted_1 = createElementVNode("h1", null, "Hello")  // 模块级别，只创建一次

function render() {
  return createElementVNode("div", null, [
    _hoisted_1,  // 直接引用，不重新创建
    createElementVNode("span", null, toDisplayString(ctx.msg), 1 /* TEXT */)
  ])
}

// 编译前
<button @click="handler">Click</button>

// 编译后
createElementVNode("button", {
  onClick: _cache[0] || (_cache[0] = (...args) => ctx.handler(...args))
}, "Click")

// 编译前
<div v-if="show">Visible</div>
<div v-else>Hidden</div>

// 编译后
(show)
  ? (openBlock(), createElementBlock("div", null, "Visible"))
  : (openBlock(), createElementBlock("div", null, "Hidden"))

// 编译前
<li v-for="item in list" :key="item.id">{{ item.name }}</li>

// 编译后
renderList(ctx.list, (item) => {
  return (openBlock(), createElementBlock("li", { key: item.id },
    toDisplayString(item.name), 1 /* TEXT */))
})

父 Block 的 dynamicChildren 只包含直接子节点中的动态节点
  └── v-if 创建的子 Block 有自己独立的 dynamicChildren
       └── v-for 创建的每个子 Block 也有自己独立的 dynamicChildren

// 编译前
<input v-model="name" />;

// 编译后（简化）
createElementVNode(
  "input",
  {
    value: ctx.name,
    onInput: ($event) => (ctx.name = $event.target.value),
  },
  null,
  8 /* PROPS */,
  ["value", "onInput"],
);
// 需要 PROPS PatchFlag，因为 value 和 onInput 都是动态属性
// 实际产物会用 withDirectives 包裹 vModelText 指令处理修饰符与兼容性

// 编译前
<MyInput v-model="name" />;

// 编译后
createVNode(MyInput, {
  modelValue: ctx.name,
  "onUpdate:modelValue": ($event) => (ctx.name = $event),
});

// 编译前
<UserForm v-model:name="name" v-model:age="age" />;

// 编译后
createVNode(
  UserForm,
  {
    name: ctx.name,
    "onUpdate:name": ($event) => (ctx.name = $event),
    age: ctx.age,
    "onUpdate:age": ($event) => (ctx.age = $event),
  },
  null,
  8 /* PROPS */,
  ["name", "onUpdate:name", "age", "onUpdate:age"],
);

// SSR 编译输出（简化）
function ssrRender(_ctx, _push) {
  _push(`<div><h1>Hello</h1><span>${_ctx.msg}</span></div>`);
  // h1 是静态的，直接输出 HTML 字符串
  // msg 是动态的，用模板字符串插值
}

// 完全静态的子树
const _hoisted_1 = `<div class="static"><h1>Hello</h1><p>World</p></div>`;

function ssrRender(_ctx, _push) {
  _push(_hoisted_1); // 直接输出字符串，零开销
}

// Svelte 源码
let count = 0;

// Svelte 编译后（简化）
function update(changed) {
  if (changed.count) {
    text.data = count; // 直接更新文本节点
  }
}

// Vue 3 编译后
function render() {
  return createElementVNode(
    "div",
    null,
    toDisplayString(ctx.count),
    1 /* TEXT */,
  );
}
// 运行时：比较新旧 VNode，更新 textContent

// packages/compiler-core/src/compile.ts
export function baseCompile(template: string, options: CompilerOptions) {
  // 1. 解析：模板字符串 → AST
  const ast = parse(template, options);

  // 2. 转换：AST 优化标记
  transform(ast, {
    ...options,
    nodeTransforms: [
      transformElement, // 处理元素节点
      transformText, // 处理文本节点
      transformExpression, // 处理表达式
      transformSlotOutlet, // 处理 slot
      // ... 其他转换
    ],
    directiveTransforms: {
      on: transformOn, // 处理 v-on
      bind: transformBind, // 处理 v-bind
      model: transformModel, // 处理 v-model
    },
  });

  // 3. 生成：AST → 渲染函数代码
  return generate(ast, options);
}

// packages/compiler-core/src/transforms/transformElement.ts
function buildProps(node, context) {
  const props = [];
  let patchFlag = 0;

  // 遍历所有属性，判断动态类型
  for (const prop of node.props) {
    if (prop.type === NodeTypes.DIRECTIVE) {
      if (prop.name === "on") {
        patchFlag |= PatchFlags.NEED_PATCH;
      } else if (prop.name === "bind") {
        if (prop.arg.content === "class") patchFlag |= PatchFlags.CLASS;
        else if (prop.arg.content === "style") patchFlag |= PatchFlags.STYLE;
        else patchFlag |= PatchFlags.PROPS;
      }
    }
  }

  return { props, patchFlag };
}