vue模板适合声明式复用，依赖插槽机制抽象结构；渲染函数适合编程式复用，通过js函数封装、动态生成vnode实现行为复用。
Vue 的渲染函数和模板在逻辑复用上根本不是同一类工具——模板适合声明式复用，渲染函数适合编程式复用。前者靠插槽、作用域插槽、具名插槽组合结构；后者靠函数封装、条件分支、map/filter 等 JS 能力直接构造 vnode 树。
模板的逻辑复用：靠结构抽象，不写 JS 逻辑
模板通过组件封装 + 插槽机制实现复用，逻辑本身仍留在模板内。比如一个卡片组件，用 默认插槽 放内容、具名插槽 放标题或操作区，父组件只负责传入 slot 内容，不参与渲染决策。
- 复用单位是“结构片段”，如
<card><template>标题</template></card> - 无法动态决定是否渲染某个标签，比如不能根据配置项决定用
<h1></h1>还是<h2></h2>—— 得靠多个v-if并列写死 - 插槽内容在父组件中定义，但渲染时机、响应式依赖由子组件控制，复用时容易出现不必要的重渲染
渲染函数的逻辑复用：靠函数封装，直接操作 vnode
渲染函数把渲染逻辑变成可调用、可组合、可测试的 JavaScript 函数。你可以把一段生成表头的逻辑抽成独立函数，再在多个组件中复用，甚至传参定制行为。
- 例如：一个
genHeader(h, level, text)函数，返回h(`h${level}`, text)，不同组件调用时传不同 level - 可基于 props 动态选择组件类型：
h(this.componentMap[this.type], props, slots)，复用一套渲染逻辑驱动多种 UI 表现 - 循环、过滤、合并 class/style 都在 JS 层完成，避免模板里堆砌
v-for+v-if+:class的嵌套表达式
复用粒度与协作成本的平衡
模板复用更轻量，设计师能看懂、新人易上手；渲染函数复用更彻底，但要求开发者理解 vnode 结构、key 规则、响应式追踪边界。一个表格组件若列配置常变，用渲染函数把列生成逻辑抽成 renderColumns() 方法，比在模板里写七八层 v-for 和 v-if 更易维护。
- 团队项目中，80% 的通用组件用模板 + 插槽就够了
- 需要跨多个业务线共享渲染策略（如权限控制下的字段显隐、多主题样式注入）时，渲染函数才是真正的复用载体
- UI 库开发几乎必须用渲染函数，因为使用者传入的是 schema 或配置对象，而不是预设的 HTML 结构
别混淆“复用”和“可配置”
模板支持属性传入和插槽注入，属于配置式复用；渲染函数支持运行时逻辑判断和 vnode 构造，属于行为式复用。比如一个按钮组件，模板能复用尺寸、颜色等 props；而渲染函数能让它根据权限自动替换成 <router-link></router-link> 或禁用状态的 <span></span>，这才是真正意义上的逻辑复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
