Vue 高效开发 实践【二】

接着上一篇的watcher，这篇分享一下对render 函数的看法。

Render & JSX

render函数使得我们可以以程序的逻辑去创建组件，其实在最后也是要被编译成createElement的函数去执行，创建得到VNode的。

官网的例子 https://cn.vuejs.org/v2/guide/render-function.html
当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：

<template>
  <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>
</template>

但其实这样是不太优雅的写法，我们可以很好的利用render函数：

export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  },
  render: function(createElement) {
    return createElement(
      "h" + this.level, // 标签名称
      this.$slots.default // 子元素数组
    );
  }
};

同时也可以使用JSX语法，JSX语法在本质上也会被转化为CreateElement语句，只不过使用起来更方便。
JSX 写法

export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  },
  render: function(h) {
    const Tag = `h${this.level}`;
    return <Tag>{this.$slots.default}</Tag>;
  }
};

参考： https://cn.vuejs.org/v2/guide/render-function.html
接下来还有一些实践，大家可以继续关注。