Vue 渲染函数 (render)

 简单例子：

Vue.component('render-demo', {
  props: {
    num: {
      type: Number,
      required: true
    }
  },
  render (createElement) {
    return createElement () { 'div', this.props.num }
  }
})

上面函数等效于下面 组件模板 ：

<template>
  <div>
    props: {{ num }}
  </div>
</template>
<script>
export default {
  props: {
    num: {
      type: Number,
      required: ture
    }
  }
}
</script>

更多参数说明及注意事项，查看 官方文档 ，简单模板: 介绍模板 。

---

JSX：

JSX 就是 JS 和 XML 的结合。

render: function (createElement) {
  return createElement(
    'anchored-heading', {
      props: {
        level: 1
      }
    }, [
      createElement('span', 'Hello'),
      ' world!'
    ]
  )
}

上面 createElement 函数等效于下面例子：

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