Vue - 渲染函数render

一、render函数是什么

简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定它的简写叫h

示例：分别使用html语法和render函数来实现根据传入的 level （h1-h6）页面渲染不同的标题格式

【1】使用组件的形式

// 父组件
<template>
  <div>
    <child1 :level='level'>我是标题</child1>
  </div>
</template>
<script>
  const child1 = () => import("./child1.vue");
  export default {
    components: { child1 },
    data() {
      return {
        level: 1
      };
    },
  };
</script>

// 子组件 child1.vue
<template>
  <div>
    <h1 v-if="level == 1">
      <slot></slot>
    </h1>
    <h2 v-if="level == 2">
      <slot></slot>
    </h2>
    <h3 v-if="level == 3">
      <slot></slot>
    </h3>
    <h4 v-if="level == 4">
      <slot></slot>
    </h4>
    <h5 v-if="level == 5">
      <slot></slot>
    </h5>
    <h6 v-if="level == 6">
      <slot></slot>
    </h6>
  </div>
</template>
<script>
  export default {
    props: {
      level: {
        require: true,
        type: Number,
      }
    }
  };
</script>

【2】使用render函数的形式（修改child1子组件）

<script>
  export default {
    props: {
      level: {
        require: true,
        type: Number,
      }
    },
    render(createElement) {
      return createElement('h' + this.level, this.$slots.default);
    }
  };
</script>

对比两种实现方式，我们发现这里用模板并不是最好的选择，不但代码冗长，而且在每一个级别的标题中重复书写了<slot></slot>。使用render函数实现看起来简单多了，这样代码精简很多，但是需要非常熟悉 Vue 的实例属性。在这个例子中，你需要知道，向组件中传递不带v-slot指令的子节点时，比如child1中的“我是标题”，这些子节点被存储在组件实例中的this.$slots.default中。

二、render函数的参数

render 函数即渲染函数，它是个函数，render 函数的返回值是VNode（即：虚拟节点，也就是我们要渲染的节点）
createElement 是 render 函数的参数，它本身也是个函数，并且有三个参数。接来下我们重点介绍这三个参数

【1】createElement 第一个参数是必填的，可以是String | Object | Function

String，表示的是HTML 标签名
Object ，一个含有数据的组件选项对象
Function ，返回了一个含有标签名或者组件选项对象的async 函数

示例：

    render: function (createElement) {
      // String
      return createElement('h1');

      //Object
      return createElement({
        template: " <div>锄禾日当午</div> "
      })

      // Function
      let domFun = function () {
        return {
          template: " <div> 锄禾日当午</div> "

        }
      }
      return createElement(domFun())
    }

【2】createElement 第二个参数是选填的，一个与模板中属性对应的数据对象 ****常用的有class | style | attrs | domProps | on

class：控制类名
style ：样式
attrs ：用来写正常的 html 属性 id src 等等
domProps :用来写原生的dom 属性
on:：用来写原生方法

return createElement('div', {
        // 与 `v-bind:class` 的 API 相同，
        // 接受一个字符串、对象或字符串和对象组成的数组
        'class': {
          foo: true,
          bar: false
        },

        // 与 `v-bind:style` 的 API 相同，
        // 接受一个字符串、对象，或对象组成的数组
        style: {
          color: 'red',
          fontSize: '14px'
        },

        // 普通的 HTML 特性
        attrs: {
          id: 'foo'
        },

        // 组件 prop
        props: {
          myProp: 'bar'
        },

        // DOM 属性
        domProps: {
          innerHTML: 'baz'
        },

        // 事件监听器在 `on` 属性内，
        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
        // 需要在处理函数中手动检查 keyCode。
        on: {
          click: this.clickHandler
        },

        // 仅用于组件，用于监听原生事件，而不是组件内部使用
        // `vm.$emit` 触发的事件。
        nativeOn: {
          click: this.nativeClickHandler
        },

        // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
        // 赋值，因为 Vue 已经自动为你进行了同步。
        directives: [
          {
            name: 'my-custom-directive',
            value: '2',
            expression: '1 + 1',
            arg: 'foo',
            modifiers: {
              bar: true
            }
          }
        ],

        // 作用域插槽的格式为
        // { name: props => VNode | Array<VNode> }
        scopedSlots: {
          default: props => createElement('span', props.text)
        },

        // 如果组件是其它组件的子组件，需为插槽指定名称
        slot: 'name-of-slot',

        // 其它特殊顶层属性
        key: 'myKey',
        ref: 'myRef',

        // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
        // 那么 `$refs.myRef` 会变成一个数组。
        refInFor: true
      })

【3】createElement 第三个参数是选填的，代表子级虚拟节点 (VNodes)，由 createElement() 构建而成，正常来讲接收的是一个字符串或者一个数组，一般数组用的是比较多的

      return createElement('div', {
        attrs: {
          id: "content"
        }
      }, [
          createElement('h1', '我是H1标题'),
          createElement('h6', '我是H6标题')
        ]
      )

三、v-model在render函数中的使用

在render函数中，没有提供v-model的实现，所以你必须自己实现相应的逻辑。这就是深入底层的代价，但与v-model相比，这可以让你更好地控制交互细节。

<template>
  <div>
    <child1 :name='name' v-model="name"></child1>
    <p>{{name}}</p>
  </div>
</template>
<script>
  const child1 = () => import("./child1.vue");
  export default {
    components: { child1 },
    data() {
      return {
        name: 'Demi'
      };
    },
  };
</script>

<script>
  export default {
    props: {
      name: {
        require: true,
      }
    },
    render(createElement) {
      let self = this
      return createElement('input', {
        domProps: {
          value: self.name
        },
        on: {
          input(event) {
            self.$emit('input', event.target.value)
          }
        }
      })
    }
  };
</script>

结果如下：

render函数通过input方法实现数据双向绑定，当子组件name改变，父组件也随着更新

四、render函数中的事件修饰符

对于.passive，.capture， .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on

修饰符	前缀
`.passive`	`&`
`.capture`	!
`.once`	`~`
`.capture.once` 或`.once.capture`	`~!`

  on: {
    '!click': this.doThisInCapturingMode,
    '~keyup': this.doThisOnce,
    '~!mouseover': this.doThisOnceInCapturingMode
  }

五、JSX语法糖

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

复杂的render函数书写异常痛苦，这就是为什么会有一个Babel插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。

  render(h) {
    return (
      <Child1 level={1}>
        <span>Hello</span> world!
    </Child1>
    )
  }

将h作为createElement的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的3.4.0版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入const h = this.$createElement，这样你就可以去掉(h)参数了。对于更早版本的插件，如果h在当前作用域中不可用，应用会抛错。

JSX语法学习文档: vuejs/JSX JSX语法简介

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料