深入 Vue3 源码：响应式、虚拟 DOM 和编译优化到底做了什么

// 简化后的源码逻辑 (reactivity/src/reactive.ts)
function createReactiveObject(target, baseHandlers, proxyMap) {
  // 1. 如果已经是代理对象，直接返回（避免重复代理）
  const existingProxy = proxyMap.get(target)
  if (existingProxy) return existingProxy

  // 2. 创建 Proxy，拦截 get/set/deleteProperty/has/ownKeys
  const proxy = new Proxy(target, baseHandlers)

  // 3. 缓存映射关系
  proxyMap.set(target, proxy)
  return proxy
}

// 简化后的 RefImpl 类 (reactivity/src/ref.ts)
class RefImpl {
  private _value: any
  public dep: Dep = new Dep()

  constructor(value) {
    // 如果是对象，用 reactive 包装
    this._value = isObject(value) ? reactive(value) : value
  }

  get value() {
    this.dep.track()    // 依赖收集
    return this._value
  }

  set value(newVal) {
    if (hasChanged(newVal, this._value)) {
      this._value = isObject(newVal) ? reactive(newVal) : newVal
      this.dep.trigger() // 触发更新
    }
  }
}

// 核心思路 (runtime-core/src/renderer.ts)
// 假设旧列表 [A, B, C, D, E]，新列表 [A, D, B, E, C]

// 第 1 步：从头扫描，找到相同前缀 → A
// 第 2 步：从尾扫描，找到相同后缀 → (无)
// 第 3 步：对剩余部分建立旧节点的 key → index 映射
// 第 4 步：计算最长递增子序列 [D, E] → 这些节点不需要移动
// 第 5 步：只移动不在 LIS 中的节点 B 和 C

// 模板
<div class="static-class" :id="dynamicId">
  <!--  -->
</div>

// 编译产物（简化）
createVNode("div", { class: "static-class", id: dynamicId }, message,
  PatchFlags.TEXT | PatchFlags.PROPS, ["id"]
)
// TEXT → 只有文本内容可能变
// PROPS + ["id"] → 只有 id 这个 prop 可能变
// class="static-class" 是静态的，Diff 时直接跳过

// 模板
<div>
  <p class="title">这是静态标题</p>
  <p>{{ dynamicContent }}</p>
</div>

// 编译产物（简化）
// 静态节点被提升到模块作用域，只创建一次
const _hoisted_1 = createVNode("p", { class: "title" }, "这是静态标题")

function render() {
  return createVNode("div", null, [
    _hoisted_1,               // 直接复用，不重新创建
    createVNode("p", null, ctx.dynamicContent, PatchFlags.TEXT)
  ])
}

// 假设一个组件模板有 100 个节点，但只有 3 个是动态的
// 传统 Diff：遍历 100 个节点
// Block Tree：只比对 dynamicChildren 数组里的 3 个节点

// 编译器生成的代码大致是：
function render() {
  return openBlock(), createBlock("div", null, [
    /* ...100 个子节点... */
  ])
  // openBlock() 开启收集模式
  // 所有带 PatchFlag 的子节点会自动注册到当前 Block
  // 最终 dynamicChildren = [node23, node67, node89] 只有 3 个
}

数据变化 (ref.value = newVal)
  ↓
trigger() → 找到依赖这个数据的 effect（组件的 render effect）
  ↓
调度器 queueJob → 将更新任务推入微任务队列（批量更新）
  ↓
执行 render 函数 → 生成新的 VNode 树（带 PatchFlags）
  ↓
patch(旧VNode, 新VNode)
  ↓ Block Tree 优化
只比对 dynamicChildren（跳过静态节点）
  ↓ PatchFlags 优化
只比对标记变化的 props / text（跳过静态属性）
  ↓
最小化 DOM 操作