Vue 中模板语法与 Render 函数的详细对比说明

一、核心区别对比

二、基础示例对比

场景：渲染带条件的列表

模板语法实现：

<template>
  <div>
    <template v-if="items.length">
      <ul class="list">
        <li 
          v-for="(item, index) in items" 
          :key="index"
          :class="{ active: item.selected }"
        >
          {{ item.name }}
        </li>
      </ul>
    </template>
    <p v-else>No items found</p>
  </div>
</template>复制

Render 函数实现：

export default {
  render(h) {
    if (this.items.length) {
      return h('div', [
        h('ul', { class: 'list' }, 
          this.items.map((item, index) => {
            return h('li', {
              class: { active: item.selected },
              key: index
            }, item.name)
          })
        )
      ])
    } else {
      return h('p', 'No items found')
    }
  }
}复制

三、高级场景对比

场景：动态生成表格列

模板语法局限：

<!-- 需要预先知道列结构 -->
<table>
  <tr v-for="row in data">
    <td v-for="col in columns">{{ row[col.prop] }}</td>
  </tr>
</table>复制

Render 函数优势：

export default {
  render(h) {
    // 动态生成列（可包含复杂逻辑）
    return h('table', 
      this.data.map(row => 
        h('tr', 
          this.columns.filter(col => col.visible).map(col => 
            h('td', {
              style: { color: col.color }, // 动态样式
              on: {
                click: () => this.handleClick(col.prop)
              }
            }, row[col.prop])
          )
        )
      )
    )
  }
}复制

四、JSX 语法示例

export default {
  render() {
    return (
      <div class="container">
        {this.showHeader && 
          <Header 
            title={this.title} 
            onClose={this.handleClose}
          />}
        
        <main class="content">
          {this.items.map(item => (
            <ItemCard 
              item={item} 
              key={item.id}
              onClick={this.selectItem}
            />
          ))}
        </main>
      </div>
    )
  }
}复制

五、选择建议指南

优先使用模板语法：

• 常规 UI 组件开发
• 需要快速原型开发时
• 团队对 HTML 更熟悉时
• 需要直观的结构展示时

优先使用 Render 函数：

• 需要动态生成复杂组件结构时
• 需要实现高阶组件 (HOC) 时
• 需要最大化性能控制时
• 需要与 TypeScript 深度集成时
• 需要跨平台渲染时（如 Weex）

六、性能关键差异

1. 编译阶段：

   • 模板语法会被编译为优化后的 render 函数
   • 手写 render 函数需要自行优化

2. 更新机制：

   // 模板编译后的优化代码示例
   function render() {
     with(this) {
       return _c('div', { staticClass: "box" }, [
         _c('span', [_v(_s(message))])
       ])
     }
   }复制

3. 手动优化示例：

   export default {
     render(h) {
       // 通过缓存 VNode 提升性能
       if (!this.cachedNode) {
         this.cachedNode = h('div', 
           this.largeDataSet.map(item => 
             h('ComplexNode', { props: { item } })
           )
         )
       }
       return this.cachedNode
     }
   }复制

七、混合使用技巧

<template>
  <div>
    <!-- 使用模板处理静态部分 -->
    <header class="main-header">
      <slot name="header"></slot>
    </header>
    
    <!-- 使用 render 处理动态部分 -->
    <render-section :items="dynamicItems"/>
  </div>
</template>
 
<script>
export default {
  components: {
    RenderSection: {
      render(h) {
        return h('div', 
          this.items.map(item => 
            h('article', { class: 'card' }, [
              h('h3', item.title),
              h('p', item.content)
            ])
          )
        )
      }
    }
  }
}
</script>复制

通过理解这些差异和适用场景，开发者可以更精准地选择适合项目需求的开发方式。模板语法提供简洁高效的标准开发流程，而 Render 函数则为复杂场景和性能优化提供终极解决方案。