Vue render 函数核心用法与参数解析

render 函数基础

在 Vue 开发中，render 函数提供了比模板更底层的控制能力。它接收一个 h 函数作为参数，用于创建虚拟 DOM 节点。相比模板语法，render 函数更适合处理动态组件或需要复杂逻辑渲染的场景。

基本结构

render 函数的核心在于 h 方法的调用。通常形式如下：

render(h) {
  return h(
    'div', // 标签名或组件引用
    { /* 属性配置对象 */ },
    ['子元素内容'] // 文本或子节点数组
  )
}

参数详解

1. 第一个参数（标签/组件）：可以是字符串标签名（如 'div'），也可以是引入的组件名（如 mySwiper）。
2. 第二个参数（属性对象）：对应模板中的指令和属性。支持以下常用配置：
   • class / style：等同于 v-bind:class 和 v-bind:style。
   • attrs：标签的基本 HTML 属性，如 id、src。
   • domProps：DOM 原生属性，例如 innerHTML。
   • props：传递给组件的 props。
   • on / nativeOn：事件监听器。注意 nativeOn 主要用于 Vue 2 的原生事件绑定。
3. 第三个参数（子元素）：可以是字符串文本，也可以是包含其他 VNode 的数组。

实战示例

下面是一个完整的 render 函数片段，展示了如何组合这些属性：

render: function(h) {
  return h(mySwiper, {
    class: ['swiper-container'],
    style: { height: '100%' },
    attrs: {
      id: 'my-swiper',
      src: '/images/bg.jpg'
    },
    domProps: {
      innerHTML: 
    },
    : {
      : 
    },
    : {
      :  .(val)
    },
    : {
      :  {}
    }
  })
}