vue中Render函数使用介绍

一、前言

        我刚在官网上研究了半天有关render的文档，我总结一下我个人的理解。 render 函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数，render函数更接近编译器。

        配合官方文档，总结一下我的心得

二、render

        拿官网的例子为例 ，通过父传子level，动态生成标题

<template>  
<div>
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</div>
</template>
 
<script>
export defalut {
  // 接收父组件传来的 level
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}
</script>

        虽然模板在大多时候很好用，但明显这个时候就不适合了，不但代码冗长，而且重复使用 <slot></slot>

        这个时候就可以使用render函数

 render: function (createElement) {  
    // createElement可以写成 h
    // createElement 是 render 函数的参数，同时 createElement 本身也是一个函数
    return createElement(
      'h' + this.level,   // 标签名称
      style: {            // 给标签添加属性
          color: 'red',
          fontSize: '14px'
      },
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }

 createElement 函数有三个参数：

        参数1、标签名称，父组件传几，我这就是h几，不用再template上面加if，else了是不是很简洁实用？（必填）

        参数2、这里相当于给标签加属性 例如：<div class='foo' style='color:red,font-size: 14px'></div>（可选）

        参数3、参数中渲染的标签的子元素数组（可选）

        当然createElement的第一个参数也可以是组件

三、编译

vue 中的真实 DOM 是 template 转成 createElement 的形式进行渲染的，原理如下：

        template是通过compile编译器把template编译成AST语法树, AST在内部经过一些转化得到render函数，render的返回值是Vnode, VNode是Vue的虚拟DOM节点,若直接使用render函数则免去以上步骤

        当然，render 也是有缺点的，如果要记住每个参数的用法，传参等，实在是有点麻烦了，这时就可以使用jsx来优化这个繁琐的过程。这就有点偏向react了