渲染函数与 h()

.vue 模板 ──编译器──► render 函数（编译产物就是 h() 调用树）──► vnode 树 ──► diff/patch ──► 真实 DOM

手写 render = 跳过"写模板"这一步，直接写编译产物

import { h } from 'vue'

// h(类型, props/attrs, 子节点)
const vnode = h(
  'div',                                  // 1. 标签字符串 | 组件对象 | 异步组件
  {                                       // 2. props 对象（可省略）
    id: 'box',
    class: ['a', { b: true }],            // class/style 支持数组/对象/嵌套
    style: { color: 'red' },
    onClick: () => console.log('clicked'),// on 开头即事件监听（onClick/onInput）
    someProp: 123,                        // 组件的 props / 未声明的变 attrs
  },
  [                                       // 3. 子节点：字符串 | vnode 数组 | 插槽对象
    h('span', 'hello'),
    h('em', 'world'),
  ]
)

h('div', '纯文本')                    // 字符串 = 文本子节点
h('div', [h('span'), h('span')])      // 数组 = 子 vnode 列表（唯一组件根约束仍适用）
h(Comp, null, {                       // 对象 = 插槽（对应模板里的 slot 内容）
  default: () => '默认插槽内容',
  header: () => h('h1', '标题'),      // 作用域插槽：(props) => vnode
  footer: (slotProps) => h('p', slotProps.x),
})

<script>
import { h } from 'vue'

export default {
  props: ['level'],
  setup(props, { slots, attrs, emit }) {
    // setup 返回渲染函数（替代 template）
    return () => h(`h${props.level}`, attrs, slots)
    // 注意：返回的是 () => vnode 函数，不是 vnode 本身——
    // 每次重渲染重新调用，才能拿到最新 props
  },
}
</script>

interface FieldSchema {
  type: 'input' | 'select' | 'checkbox'
  prop: string
  label: string
  options?: { label: string; value: string }[]
}

// DynamicForm.vue
<script setup lang="ts">
import { h, useModel } from 'vue'

const props = defineProps<{ schema: FieldSchema[]; modelValue: Record<string, unknown> }>()
const emit = defineEmits<{ 'update:modelValue': [Record<string, unknown>] }>()

function renderField(f: FieldSchema) {
  const on = {
    'onUpdate:modelValue': (v: unknown) =>
      emit('update:modelValue', { ...props.modelValue, [f.prop]: v }),
  }
  switch (f.type) {
    case 'input':
      return h('div', { class: 'field' }, [
        h('label', f.label),
        h('input', { ...on, value: String(props.modelValue[f.prop] ?? '') }),
      ])
    case 'select':
      return h('div', { class: 'field' }, [
        h('label', f.label),
        h('select', on, (f.options ?? []).map(o =>
          h('option', { value: o.value }, o.label))),
      ])
    case 'checkbox':
      return h('label', { class: 'field' }, [
        h('input', { type: 'checkbox', ...on, checked: Boolean(props.modelValue[f.prop]) }),
        f.label,
      ])
  }
}
</script>

<template>
  <component :is="() => schema.map(renderField)" />
</template>

interface Column<T> {
  key: keyof T & string
  title: string
  render?: (row: T) => ReturnType<typeof h>   // 可选的自定义渲染
}

function useColumns() {
  const columns: Column<{ name: string; status: 'on' | 'off' }>[] = [
    { key: 'name', title: '歌姬' },
    {
      key: 'status', title: '状态',
      render: (row) => h('span',
        { class: ['badge', row.status === 'on' ? 'green' : 'gray'] },
        row.status === 'on' ? '启用' : '停用'),
    },
  ]
  return columns
}

// 函数式组件：本质就是"一个渲染函数"，无实例、无状态、开销最小
import { h, type FunctionalComponent } from 'vue'

const Badge: FunctionalComponent<{ text: string; type?: 'ok' | 'warn' }> =
  (props, { slots }) =>
    h('span', { class: `badge ${props.type ?? 'ok'}` }, slots.default?.() ?? props.text)
Badge.props = ['text', 'type']

// 动态组件的 render 形态：h() 第一个参数直接放组件对象/名称
import CompA from './A.vue'
import CompB from './B.vue'

const maps = { a: CompA, b: CompB }
const current = maps[tab.value]
return () => h(current, { size: 'large', onOk: handleOk })
// 等价于模板的 <component :is="current" size="large" @ok="handleOk">

// 需要 @vitejs/plugin-vue-jsx；语法近似 React JSX
const App = () => (
  <div class="box">
    <h1 onClick={handle}>标题</h1>
    <Badge text="新" type="warn">角标</Badge>
  </div>
)

选模板（默认）：
  - 结构在编译期可知；团队以 SFC 协作为主；需要编译器优化与 DevTools 模板调试
选 render/JSX：
  - 结构由运行时数据决定（schema 驱动、列配置、任意深度递归）
  - 在 TS 配置对象里写渲染逻辑（ProTable 列、路由菜单渲染）
  - 封装组件库底层（一个函数产出多种 vnode 形态）
信号：模板里 v-if 链超过四层、或开始拼接字符串模板 —— 该换 render 了