Vue 3 运行机制

当你写下 <div>{{ msg }}</div>，浏览器最终看到的却是一连串精确到像素的绘制指令。Vue 3 在这条链路里扮演了「翻译官 + 调度者」的双重角色：把声明式模板翻译成渲染函数，再把渲染函数翻译成真实 DOM，并在数据变化时以最小代价更新视图。

一、描述 UI

模板直观，虚拟 DOM 灵活。Vue 3 并不强迫二选一，而是提供一条双向通道：

模板先经过编译器变成渲染函数；
渲染函数执行后得到虚拟 DOM（JS 对象），再交给渲染器绘制成真实节点；
在需要极致灵活性的场景，你可以直接手写渲染函数，绕过模板阶段。

示例：

html 复制代码

<h1 id="title" @click="handler">
  <span>hello</span>
</h1>

等价虚拟节点：

js 复制代码

{
  tag: 'h1',
  props: { id: 'title', onClick: handler },
  children: [{ tag: 'span', children: 'hello' }]
}

虚拟节点把「标签、属性、事件、层次」全部扁平化为可序列化对象，为后续 diff 和跨端渲染奠定数据结构。

二、编译器

编译器内部是一条三段流水线：

解析器把模板字符串解析为模板 AST；
转换器把模板 AST 变成 JavaScript AST，同时进行静态提升、事件缓存、PatchFlag 标记；
生成器把 JavaScript AST 打印为真正的渲染函数源码。

结果示例：

vue 复制代码

<template>
  <div>
    <h1 :id="someId">Hello</h1>
  </div>
</template>

生成：

js 复制代码

function render() {
  return h('div', [h('h1', { id: someId }, 'Hello')])
}

静态节点被提升为常量，动态节点被打上 PatchFlag，运行时 diff 只需关注真正会变化的部分。

三、渲染器

渲染器只做三件事：

创建元素：递归遍历虚拟节点，调用 document.createElement；
安装属性与事件：识别以 on 开头的事件名，统一绑定；
处理子节点：字符串直接 createTextNode，数组递归渲染。

简化实现：

js 复制代码

function renderer(vnode, container) {
  if (typeof vnode.tag === 'string') {
    const el = document.createElement(vnode.tag)
    for (const key in vnode.props) {
      if (key.startsWith('on')) {
        el.addEventListener(key.slice(2).toLowerCase(), vnode.props[key])
      } else {
        el.setAttribute(key, vnode.props[key])
      }
    }
    if (typeof vnode.children === 'string') {
      el.textContent = vnode.children
    } else if (Array.isArray(vnode.children)) {
      vnode.children.forEach(child => renderer(child, el))
    }
    container.appendChild(el)
  }
}

真实代码在此之上增加了 Block Tree 与 PatchFlag 优化，只对动态节点调用 DOM API，其余跳过。

四、组件本质

当 vnode.tag 是函数或对象时，渲染器识别为组件：

js 复制代码

const MyComponent = () => ({
  tag: 'button',
  props: { onClick: () => alert('hello') },
  children: 'click me'
})

渲染器会先执行该函数（或对象的 render 方法），拿到新的虚拟节点后再继续渲染。这一过程递归进行，形成「组件 → 虚拟节点 → 真实 DOM」的层级展开。

五、响应式系统

渲染函数执行时，会读取响应式数据（ref/reactive）。Vue 3 通过 Proxy 把每一次读取都记录为依赖，每一次写入都触发副作用：

读取时：将当前渲染函数（effect）压入 WeakMap → Map → Set 的三级依赖图；
写入时：从图中取出对应 effect，调度到微任务队列；
队列 flush 时，重新执行渲染函数，得到新的虚拟节点，再进入 diff 流程。

这套机制保证：

数据变化 → 最小化 DOM 更新；
开发者无需手动调用 setState，也无需担心数组索引新增、对象属性删除等边界情况。

六、完整闭环

开发者写模板；
编译器产出渲染函数；
渲染函数首次执行 → 虚拟 DOM → 真实 DOM（首屏）；
用户交互 → 响应式数据变更；
渲染函数再次执行 → 新虚拟 DOM；
渲染器 diff → 只更新变化节点，其余复用。

总结

Vue 3 的运行机制可以浓缩成一句话：

用编译器把模板编译成可树摇的渲染函数，用 Proxy 追踪数据依赖，用渲染器把虚拟 DOM 映射到最小真实 DOM 更新。