模板编译与渲染

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

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

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

模板编译的完整流水线：

  ┌──────────┐     ┌──────────┐     ┌──────────┐     ┌──────────┐     ┌──────────┐
  │  模板字符串 │ →   │   parse   │ →   │ transform │ →   │ generate  │ →   │ 渲染函数   │
  │ '<div>...'│     │ 模板→AST  │     │ AST 优化   │     │ AST→代码   │     │ h('div')  │
  └──────────┘     └──────────┘     └──────────┘     └──────────┘     └──────────┘
                                                     ↑
                                          ┌──────────┴──────────┐
                                          │ 优化标记              │
                                          │ • PatchFlag (动态标记)│
                                          │ • 静态提升 (hoist)    │
                                          │ • Block Tree          │
                                          └─────────────────────┘

  运行时：
  ┌──────────┐     ┌──────────┐     ┌──────────┐     ┌──────────┐
  │  渲染函数   │ →   │ 虚拟 DOM  │ →   │   diff    │ →   │ 真实 DOM  │
  │ 执行→VNode │     │ 新旧两棵树 │     │ 对比差异   │     │ 最小更新   │
  └──────────┘     └──────────┘     └──────────┘     └──────────┘

v-model 的编译转换图解：

  模板层（你写的）          编译器转换           运行时（编译后）
  ┌──────────────┐      ┌────────────┐      ┌────────────────────┐
  │ <input        │      │            │      │ h('input', {       │
  │   v-model=    │  →   │  编译器拆分  │  →   │   value: name,     │ ← 数据→视图
  │   "name" />   │      │  双向绑定    │      │   onInput: e => {  │ ← 视图→数据
  └──────────────┘      └────────────┘      │     name = e.target │
                                             │       .value        │
                                             │   }                 │
                                             │ })                  │
                                             └────────────────────┘

  组件层（你写的）          编译器转换           运行时（编译后）
  ┌──────────────┐      ┌────────────┐      ┌────────────────────┐
  │ <MyInput      │      │            │      │ h(MyInput, {       │
  │   v-model=    │  →   │  编译器拆分  │  →   │   modelValue: name,│ ← prop
  │   "name" />   │      │  prop+事件   │      │   onUpdate:val => {│ ← 事件
  └──────────────┘      └────────────┘      │     name = val      │
                                             │   }                 │
                                             │ })                  │
                                             └────────────────────┘

  多 v-model（你写的）     编译器转换           运行时（编译后）
  ┌──────────────┐      ┌────────────┐      ┌────────────────────┐
  │ <UserForm     │      │            │      │ h(UserForm, {      │
  │  v-model:name │  →   │ 每个 model  │  →   │   name: name,      │
  │  v-model:age  │      │ 独立 prop+  │      │   onUpdate:name,   │
  │ />            │      │ 独立事件    │      │   age: age,        │
  └──────────────┘      └────────────┘      │   onUpdate:age,    │
                                             │ })                  │
                                             └────────────────────┘

// 你写的：
<input v-model="name" />;

// 编译器转换后（简化）：
h("input", {
  value: name,
  onInput: (e) => {
    name = e.target.value;
  },
});

// 你写的：
<MyInput v-model="name" />;

// 编译器转换后（简化）：
h(MyInput, {
  modelValue: name,
  "onUpdate:modelValue": (val) => {
    name = val;
  },
});

// 子组件内部：
defineProps(["modelValue"]);
defineEmits(["update:modelValue"]);

// 你写的：
<UserForm v-model:name="name" v-model:age="age" />;

// 编译器转换后：
h(UserForm, {
  name: name,
  "onUpdate:name": (val) => {
    name = val;
  },
  age: age,
  "onUpdate:age": (val) => {
    age = val;
  },
});

// 源码简化
const queue = [];
let isFlushing = false;
let currentFlushPromise = null;
const resolvedPromise = Promise.resolve();

function queueJob(job) {
  if (!queue.includes(job)) {
    queue.push(job);
    queueFlush();
  }
}

function queueFlush() {
  if (!isFlushing) {
    isFlushing = true;
    currentFlushPromise = resolvedPromise.then(flushJobs); // 微任务中刷新队列
  }
}

function nextTick(fn) {
  const p = currentFlushPromise || resolvedPromise;
  return fn ? p.then(fn) : p; // 排在 flushJobs 之后执行
}

同步代码执行：
  this.count = 1 → queueJob(update)
  this.name = 'new' → queueJob(update)（已存在，跳过）
  nextTick(() => { /* DOM 已更新 */ })

微任务队列：
  1. flushJobs() → 执行 queue 中的 update → DOM 更新
  2. nextTick 的回调 → 此时 DOM 已经是最新状态

<!-- 你写的 -->
<script setup>
import { ref } from "vue";
import MyButton from "./MyButton.vue";

const count = ref(0);
function increment() {
  count.value++;
}
</script>

// 编译器转换后（简化）
import { ref } from "vue";
import MyButton from "./MyButton.vue";

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment, MyButton };
  },
  components: { MyButton },
};

[script setup] 的编译时转换：

你写的：
  [script setup]
  import { ref } from 'vue'
  import MyButton from './MyButton.vue'
  const count = ref(0)
  function increment() { count.value++ }
  [/script]

编译器转换后（简化）：
  [script]
  import { ref } from 'vue'
  import MyButton from './MyButton.vue'
  export default {
    setup() {
      const count = ref(0)
      function increment() { count.value++ }
      return { count, increment, MyButton }
    },
    components: { MyButton }
  }
  [/script]

// defineProps 和 defineEmits 是编译器宏，不是运行时 API
// 你写的：
const props = defineProps({ count: Number });
const emit = defineEmits(["increment"]);

// 编译器转换后（简化）：
export default {
  props: { count: Number },
  emits: ["increment"],
  setup(props, { emit }) {
    // props 和 emit 已经作为参数传入
  },
};

PatchFlag 位掩码的图解：

  模板: <div :class="cls" :style="sty">{{ msg }}</div>

  编译器分析：
  ├── :class="cls"  → CLASS (0b010 = 2)
  ├── :style="sty"  → STYLE (0b100 = 4)
  └── {{ msg }}     → TEXT  (0b001 = 1)
                      ─────────────────
  PatchFlag = 2 | 4 | 1 = 7 (0b111)

  运行时 diff：
  ┌─────────────────────────────────────────────────────┐
  │ patchFlag = 7 (0b111)                               │
  │                                                     │
  │ 7 & TEXT  (7 & 1) = 1  → ✅ 需要更新文本             │
  │ 7 & CLASS (7 & 2) = 2  → ✅ 需要更新 class           │
  │ 7 & STYLE (7 & 4) = 4  → ✅ 需要更新 style           │
  │ 7 & PROPS (7 & 8) = 0  → ❌ 跳过，没有 props 变化     │
  └─────────────────────────────────────────────────────┘
  → 只做 3 次比较，而不是遍历所有属性！

// 模板编译后的代码（有优化）
createElementVNode("div", null, [
  _createElementVNode("span", null, "静态"), // 静态提升（_hoisted_1），只创建一次
  _createElementVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */),
  //                                                       ↑ PatchFlag
  // 运行时只比较文本内容，跳过 class/style/props 等静态属性
]);

// render 函数（无优化，全量 diff）
h("div", [
  h("span", "静态"), // 每次都要比较这个节点的所有属性
  h("span", msg), // 每次都要比较这个节点的所有属性
]);

// 编译器的入口函数
function baseCompile(template, options) {
  // 1. 解析：把模板字符串变成 AST（抽象语法树）
  const ast = parse(template, options);

  // 2. 转换：对 AST 做优化标记
  transform(ast, {
    ...options,
    nodeTransforms: [
      transformElement, // 处理元素节点
      transformText, // 处理文本节点
      transformExpression, // 处理表达式（如 {{ count }}）
      // ... 其他转换
    ],
  });

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