Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

    1. Vue.component('anchored-heading', {
    2.   render: function (createElement) {
    3.     return createElement(
    4.       'h' + this.level,   // 标签名称
    5.       this.$slots.default // 子节点数组
    6.     )
    7.   },
    8.   props: {
    9.     level: {
    10.       type: Number,
    11.       required: true
    12.     }
    13.   }
    14. })

    • createElement 返回 VNode

      1. // @returns {VNode}
      2. createElement(
      3. // {String | Object | Function}
      4. // 一个 HTML 标签名、组件选项对象，或者
      5. // resolve 了上述任何一种的一个 async 函数。必填项。
      6. 'div',
      8. // {Object}
      9. // 一个与模板中 attribute 对应的数据对象。可选。
      10. {
      11. },
      13. // {String | Array}
      14. // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
      15. // 也可以使用字符串来生成“文本虚拟节点”。可选。
      16. [
      17.   '先写一些文字',
      18.   createElement('h1', '一则头条'),
      19.   createElement(MyComponent, {
      20.     props: {
      21.       someProp: 'foobar'
      22.     }
      23.   })
      24. ]
      25. )
      1. {
      2. // 与 `v-bind:class` 的 API 相同，
      3. // 接受一个字符串、对象或字符串和对象组成的数组
      4. 'class': {
      5.   foo: true,
      6.   bar: false
      7. },
      8. // 与 `v-bind:style` 的 API 相同，
      9. // 接受一个字符串、对象，或对象组成的数组
      10. style: {
      11.   color: 'red',
      12.   fontSize: '14px'
      13. },
      14. // 普通的 HTML attribute
      15. attrs: {
      16.   id: 'foo'
      17. },
      18. // 组件 prop
      19. props: {
      20.   myProp: 'bar'
      21. },
      22. // DOM property
      23. domProps: {
      24.   innerHTML: 'baz'
      25. },
      26. // 事件监听器在 `on` 内，
      27. // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
      28. // 需要在处理函数中手动检查 keyCode。
      29. on: {
      30.   click: this.clickHandler
      31. },
      32. // 仅用于组件，用于监听原生事件，而不是组件内部使用
      33. // `vm.$emit` 触发的事件。
      34. nativeOn: {
      35.   click: this.nativeClickHandler
      36. },
      37. // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
      38. // 赋值，因为 Vue 已经自动为你进行了同步。
      39. directives: [
      40.   {
      41.     name: 'my-custom-directive',
      42.     value: '2',
      43.     expression: '1 + 1',
      44.     arg: 'foo',
      45.     modifiers: {
      46.       bar: true
      47.     }
      48.   }
      49. ],
      50. // 作用域插槽的格式为
      51. // { name: props => VNode | Array<VNode> }
      52. scopedSlots: {
      53.   default: props => createElement('span', props.text)
      54. },
      55. // 如果组件是其它组件的子组件，需为插槽指定名称
      56. slot: 'name-of-slot',
      57. // 其它特殊顶层 property
      58. key: 'myKey',
      59. ref: 'myRef',
      60. // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
      61. // 那么 `$refs.myRef` 会变成一个数组。
      62. refInFor: true
      63. }