运行时与编译时：性能优化的关键抉择 ​

// 用户提供虚拟 DOM 对象
const vnode = {
  tag: 'div',
  children: [
    { tag: 'span', children: 'hello' }
  ]
}

// 框架的 render 函数将其渲染为真实 DOM
function render(vnode, container) {
  // 根据 tag 创建 DOM 元素
  const el = document.createElement(vnode.tag)
  
  // 处理子节点：可能是文本，也可能是子元素数组
  if (typeof vnode.children === 'string') {
    // 文本节点：直接设置 textContent
    el.textContent = vnode.children
  } else if (Array.isArray(vnode.children)) {
    // 子元素：递归渲染
    vnode.children.forEach(child => render(child, el))
  }
  
  // 将元素插入容器
  container.appendChild(el)
}

render(vnode, document.body)

// 这个 render 函数就是一个"纯运行时"框架的核心
// 它不知道也不关心 vnode 是怎么来的
// 可以是手写的，也可以是某种方式生成的

const vnode = {
  tag: 'div',
  props: { class: 'container' },
  children: [
    { tag: 'h1', children: title },
    { tag: 'p', children: content },
    // ... 几十层嵌套
  ]
}

// Svelte 编译器的输出：直接的 DOM 操作代码
function create_fragment(ctx) {
  // 这些变量持有 DOM 元素的引用
  let button
  let t0  // 静态文本 "Clicked "
  let t1  // 动态文本 count
  
  return {
    // create: 创建所有 DOM 元素
    create() {
      button = document.createElement('button')
      t0 = document.createTextNode('Clicked ')
      t1 = document.createTextNode(ctx.count)  // 初始值
      // 注意：这里没有虚拟 DOM，直接操作真实 DOM
    },
    
    // mount: 将元素插入文档
    mount(target) {
      target.appendChild(button)
      button.appendChild(t0)
      button.appendChild(t1)
    },
    
    // update: 精确更新变化的部分
    update(ctx, dirty) {
      // dirty 是一个位掩码，标记哪些状态变了
      // dirty & 1 检查第 0 位（count）是否变化
      if (dirty & 1) {
        // 直接更新文本节点，不需要 Diff
        t1.data = ctx.count
      }
      // 如果有其他状态，会有 if (dirty & 2) 等检查
    }
  }
}

// 关键洞察：编译器在编译时就知道：
// 1. count 变化只影响 t1 这个文本节点
// 2. 不需要比较整个 DOM 树
// 3. 生成的代码就是最优的 DOM 操作

import { createVNode, createBlock } from 'vue'

// 静态节点被"提升"到模块作用域（函数外部）
// 整个应用生命周期只执行一次
const _hoisted_1 = createVNode('p', null, '静态内容')

export function render(ctx) {
  // createBlock 创建一个 "Block"，它会追踪内部的动态节点
  return createBlock('div', null, [
    _hoisted_1,  // 直接复用，不重新创建 VNode
    // 第 4 个参数 1 就是 PatchFlag，表示 TEXT（只有文本是动态的）
    createVNode('p', null, ctx.message, 1 /* TEXT */)
  ])
}

// Vue 3 的策略：
// 1. 编译器分析模板，提取优化信息
// 2. 生成带有优化提示的渲染函数
// 3. 运行时利用这些提示，跳过不必要的工作

// 编译前
<div>
  <span>永不变化</span>
  <span>{{ mayChange }}</span>
</div>

// 编译后
const _hoisted_1 = createVNode('span', null, '永不变化')

function render(ctx) {
  return createBlock('div', null, [
    _hoisted_1,  // 每次 render 都复用这个对象
    createVNode('span', null, ctx.mayChange, 1)
  ])
}

createVNode('p', null, ctx.text, 1 /* TEXT */)
// PatchFlag = 1 表示只有文本是动态的

createVNode('p', { class: ctx.cls }, 'static', 2 /* CLASS */)
// PatchFlag = 2 表示只有 class 是动态的