Vue组件渲染性能优化关键在精准控制VNode边界：手写render函数需显式管理key、复用静态VNode、隔离响应式依赖、模拟Block Tree与PatchFlags，并结合shallowRef、computed及异步组件按需加载。
Vue 组件渲染性能优化，关键不在“多写”，而在“写准”——精准控制 VNode 的创建、复用与更新边界。手写渲染函数时，跳过模板编译层，直触虚拟 DOM，但必须主动承担原本由编译器完成的优化逻辑。
显式设置 key 并稳定节点结构
列表、条件分支、动态插槽等场景下，key 不是可选项，而是性能底线：
- 每个列表项必须传入稳定唯一 key，例如 h('li', { key: item.id }, item.text)；用 index 作 key 在增删时会引发 DOM 错位或重复挂载
- 静态内容（如固定图标、标题文字、不变的 class 样式）提前定义为常量 VNode，在多次 render 中直接复用，避免重复创建对象
- 避免在循环中拼接相同结构，比如每次 map 都调用 h('span', { class: 'label' }, ...)；应提取为 const label = h('span', { class: 'label' })
细粒度响应式依赖与计算隔离
render 函数本身不自动追踪依赖，但能感知 setup 中声明的 ref / computed。重点是让更新只发生在真正变化的地方：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 大型数组（如 >1000 条）用 shallowRef 包裹，避免 Vue 对每一项做 reactive 代理，大幅降低初始化开销
- 过滤、排序、映射等派生数据，统一用 computed 封装，确保仅当源数据变更时才重新执行，而非每次 render 都跑一遍 filter/map
- 禁止在 render 内部做深克隆、正则匹配、JSON.stringify 或大量遍历操作；这些应移至事件处理器或 computed 中
模拟 Block Tree 与 PatchFlags 行为
Vue 3 编译器通过 Block Tree 划分静态/动态区域，并用 PatchFlags 标记需 patch 的属性类型。手写渲染函数可主动对齐这一逻辑：
立即学习“前端免费学习笔记（深入）”；
- 对含动态 class/style/onXxx 的节点，确保 props 对象是新引用（例如用 Object.assign({}, baseProps, dynamicProps)），否则 Vue 可能跳过 diff
- 插槽内容若会随状态变化，显式设置 { $stable: false }，防止父组件错误缓存 slot 函数
- 动态标签名（如 'h' + this.level）可行，但需校验 level ∈ [1,6]，否则触发运行时警告或渲染失败
动态组件与异步加载轻量封装
渲染函数天然适合构建配置驱动型 UI，如表单生成器、低代码平台：
- 用 resolveComponent + defineAsyncComponent 实现按需加载，配合 <KeepAlive> 缓存已加载实例，避免重复 fetch 和初始化
- 建立组件映射表（如 { text: TextField, number: NumberField }），根据配置字段名 resolve 组件并透传 props
- 避免在 render 中直接 new Promise 或 await；异步加载逻辑应在 setup 或生命周期中预处理，render 只负责安全兜底（如 loading 占位符）
