Scenario: In general, vue uses template to create html, but in some cases, it needs to be written in js, and then render function is used.

• Formal evolution of render function:

render: function(createElement){
   return createElement(App)
}

Further abbreviated as:

render(createElement){
	return createElement(App)
}

Further abbreviated as:

render(h){
	return h(App)
}

ES6 Arrow Function Writing:

render:(h)=>h(App)

On the explanation of replacing createElement with h, https://segmentfault.com/q/1010000007130348 The answer is given.

• Virtual DOM

render:function(createElement){
	return createElement('h1',this.title)
}

Vue traces how it wants to change the real DOM by creating a virtual DOM. What exactly will createElement return? It's not really a DOM element. Its more accurate name may be createNodeDescription, because the information it contains will tell the Vue page what kind of nodes it needs to render, including the description information of its sub nodes. We describe such a node as "virtual node" and often abbreviate it as VNode. "Virtual DOM" is our term for the entire VNode tree built by the Vue component tree.

• Three parameters of createElement

createElement(html tag, data object, child node)

render:h=>{
	return h('Defined elements'，{'Attributes of elements'}，'Contents in Elements')
}

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // An HTML tag name, component option object, or
  // resolve has one of the async functions mentioned above. Required items.
  'div',

  // {Object}
  // A data object corresponding to the attributes in the template. Optional.
  {
    // (See the next section for details)
  },

  // {String | Array}
  // Sublevel virtual nodes (VNodes) are constructed from `createElement()'.
  // You can also use strings to generate "text virtual nodes". Optional.
  [
    'Write some words first.',
    createElement('h1', 'A headline'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

• data object

{
  // Same API as `v-bind:class',
  // Accept an array of strings, objects, or strings and objects
  'class': {
    foo: true,
    bar: false
  },
  // Same API as `v-bind:style',
  // Accept an array of strings, objects, or objects
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // Common HTML Characteristics
  attrs: {
    id: 'foo'
  },
  // Component prop
  props: {
    myProp: 'bar'
  },
  // DOM attribute
  domProps: {
    innerHTML: 'baz'，
    title:'I am a good man.'  //Display title Attributes
  },
  // The event listener is in the `on'property,
  // But it no longer supports modifiers like `v-on:keyup.enter'.
  // You need to manually check keyCode in the processing function.
  on: {
    click: this.clickHandler,
    'on-change': (val) => {
　    　console.log('Release time 1')
　   }
  },
  // Used only for components, to listen for native events, not for internal use of components
  // ` Events triggered by vm.$emit'.
  nativeOn: {
    click: this.nativeClickHandler    //Native Click Event
  },
  // Custom instructions. Note that you can't `old Value'in `binding'.`
  // Assignment, because Vue has automatically synchronized for you.
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // The format of scoped slots is
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // If the component is a subcomponent of another component, you need to specify a name for the slot
  slot: 'name-of-slot',
  // Other special top-level attributes
  key: 'myKey',
  ref: 'myRef',
  // If you apply the same ref name to multiple elements in the rendering function,
  // Then `refs.myRef'becomes an array.
  refInFor: true
}

Reference documents:
https://segmentfault.com/q/1010000007130348
https://cn.vuejs.org/v2/guide/render-function.html