Vue组件渲染以template和render函数两种方式生成虚拟DOM：template声明式、易协作、适合常规场景且经编译优化；render函数命令式、高灵活、适用于动态结构，但需手动管理vnode细节。
Vue 组件渲染主要靠 template 和 render 函数 两种方式，它们本质目标一致——生成虚拟 DOM，但实现路径和适用边界差异明显。模板是声明式、直观、适合大多数场景；渲染函数是命令式、可编程、专为复杂逻辑而生。
template 更适合结构稳定、协作优先的开发
它用类 HTML 语法描述 UI，天然支持指令（v-if、v-for、v-slot）、插值和属性绑定，阅读成本低，设计师与前端可对齐语义。Vue 3 编译器还会自动做静态提升、hoist 常量、跳过静态节点 diff，让最终性能不输手写 render。
- 适合中后台表单、列表页、静态布局等常规组件
- 团队协作时更易维护，新人上手快
- 编译过程屏蔽了 VNode 创建细节，减少运行时错误
render 函数更适合动态结构与逻辑强耦合的场景
它直接返回 h() 调用生成的 VNode，所有结构、属性、事件、子节点都由 JS 控制，没有语法糖限制。比如列配置可变的表格、根据 schema 渲染表单、封装高阶组件（如 KeepAlive 或 Suspense 的封装层）都依赖它。
- 能用
if/for/switch等任意 JS 逻辑生成标签或组件 - 可动态决定是否渲染某个插槽、是否透传 props、是否包裹 wrapper 元素
- 支持精细控制 key、ref、class/style 的合并策略，甚至手动 patch vnode
两者不是互斥，而是分层协作关系
Vue 内部所有 template 最终都会被编译成 render 函数。也就是说，template 是 render 的语法糖，不是替代品。你在单文件组件里写 template，Vue 在构建时就把它转成了等效的 render() { return h(...) }。
立即学习“前端免费学习笔记（深入）”；
- 开发阶段优先用 template，够用就别过早抽象
- 当遇到 v-for 嵌套多层 + 条件组合 + 动态组件切换时，render 更清晰可控
- UI 库、低代码引擎、可视化搭建工具几乎必须用 render 函数支撑灵活性
注意：灵活性不等于随意性
render 函数虽自由，但也带来额外责任：vnode 必须唯一、key 需手动管理、响应式依赖需显式触发、错误提示不如 template 友好。它不自动处理插槽作用域绑定，也不隐式合并 class/style —— 这些都要开发者自己判断和组织。
- 重复使用同一 vnode 实例会报错，需确保每次调用都新建
- 动态 children 数组里混入字符串和 vnode 时，要留意类型一致性
- 事件名必须用驼峰（
onClick），不能写v-on:click这类模板语法
