Vue渲染函数 - render 函数

Vue渲染函数 - render 函数

在 Vue.js 中，render 函数是一种 定义组件如何渲染输出 的方式，允许开发者用 JavaScript 代码来描述组件的布局和结构。这里详细介绍 render 函数的特性、用途和用法。

所谓渲染，就是指 如何显示页面，显示成红色还是绿色？是显示 div 还是span?

注意：render 函数适用于页面的渲染，对于一些功能性的实现，比如想通过render函数将字符串转化为 int 类型等，最好不要放在render函数里。

1. 什么是 render 函数

render 函数是 Vue 组件的一个方法，用于 返回一个虚拟节点（VNode）结构，该结构将被 Vue 转换为真实的 DOM 元素。

代码示例：

render(h) {
  // 如何展示页面的逻辑
}

• h：这个参数是一个函数，用于创建虚拟节点。通常，开发者将会将它称为 createElement，但是在 Vue.js 的文档中通常用字母 h 来表示。

2、页面展示过程

当 Vue 组件实例化时，render 函数被调用。其返回的虚拟节点描述了页面需要如何展示。在更新过程中，Vue 只会比较新旧虚拟节点，确认哪些部分需要变更，从而高效地更新 DOM。

3、render 函数的参数

除了常见的 h 参数，render 函数还有一个可选的参数 `context，它包含关于组件的上下文信息，如 props、slots、attrs、scopedSlots 和 listeners 等。

render(h, context) {
  const { props, slots, attrs, listeners } = context;
  // 使用 props, slots, attrs, listeners 进行渲染
}

4. 如何使用

下面是一些使用 render 函数的示例。

（1）基本渲染

function render(h) {
  return h('div', [
    h('h1', 'Hello, World!'),
    h('p', 'This is a paragraph.')
  ]);
}

这个示例创建了一个 div，其中包含一个 h1 和一个 p 元素。

（2）传递属性和事件

function render(h) {
  return h('button', {
    on: {
      click: this.handleClick // 绑定事件
    }
  }, 'Click Me');
}

在这个示例中，创建了一个按钮，点击时会触发 handleClick 方法。

（3）条件渲染

function render(h) {
  return h('div', [
    this.isVisible ? h('p', 'Visible content') : null,
    h('button', {
      on: {
        click: () => { this.isVisible = !this.isVisible; }
      }
    }, 'Toggle Visibility')
  ]);
}

这个例子中，按钮用于切换内容的显示与隐藏。

5. render 函数的实际使用

render方法的实质就是生成template模板。render函数生成的内容相当于template的内容，所以使用render函数时，只保留逻辑层即可。

在 Vue.js 中，组件可以分为普通组件和函数式组件。函数式组件是 Vue.js 提供的一种轻量级组件，它们没有内部的实例 (this) 和生命周期钩子，因此它们的开销相对较小，并且在渲染性能上通常更有优势。函数式组件是通过设置 functional: true 选项来声明的，同时需要定义一个 render 函数一起使用。在后台管理的项目中，以系统导航菜单为例：

<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
 
    if (icon) {
      vnodes.push(<svg-icon icon-class={icon}/>)
    }
 
    if (title) {
      if (title.length > 5) {
        vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
      } else {
        vnodes.push(<span slot='title'>{(title)}</span>)
      }
    }
    return vnodes
  }
}
</script>

由于没有实例开销和生命周期钩子，函数式组件的渲染通常更高效，适用于渲染性能要求较高的场景，系统导航菜单就是一个很好的例子。

函数式组件在使用上，与普通组件一般无二：

<template>
    <div>
        <item icon="user" title="用户管理" />
    </div>
</template>
 
<script>
import Item from './Item'
 
export default {
  name: 'SidebarItem',
  components: { Item }
}
</script>

6.View Design 组件中的使用

Vue 项目中经常会结合各种组件渲染页面，本示例以 View Design 中的 Table组件的 Column 为例，展示 render 函数的使用：

      condTableCol: [
        // table表格列头信息
        {
          title: '序号',
          key:'number',
          align: 'left',
          width: 80,
        },
        {
          title: "头像",
          key: "headImageUrl",
          width: 225,
          align: "left",
          render: (h, params) => {
            return h("img", {
              attrs: { src: params.row.headImageUrl},
              style: {
                maxWidth: "50px",
                maxHeight: "40px",
                verticalAlign: "middle",
                marginRight: "10px",
              },
            });
          },
        },
        {
          title: "类型",
          key: "type",
          sortable: true,
          render: (h, params) => {
            if (params.row.type=== "YES") {
              return h("span", "通过");
            } else if (params.row.type === "NO") {
              return h("span", "驳回");
            }
          },
          align: "left",
          wiBdth: 150,
        },
        {
          title: "操作",
          key: "action",
          // width: '200',
          align: "center",
          editable: true,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  padding: "5px 0",
                },
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "text",
                      size: "small",
                    },
                    style: {
                      display: "inline-block",
                      marginRight: "10px",
                      color: "green",
                    },
                    on: {
                      click: (param) => {
                        this.editInfo(params.row);
                      },
                    },
                  },
                  "编辑",
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "text",
                      size: "small",
                    },
                    style: {
                      display: "inline-block",
                      marginRight: "10px",
                      color: "green",
                    },
                    on: {
                      click: (param) => {
                        this.remove(params.row);
                      },
                    },
                  },
                  "删除",
                ),
              ],
            );
          },
        },
      ],