什么是Vue.js的render函数？

Vue.js 的 render 函数是组件的渲染方法。它使用传入的 createElement 方法创建虚拟 DOM。
使用 render 函数的好处:

1. 完全掌控编译过程,不受限制于模板的语法。
2. 方便与第三方库集成,如 React。
3. 渲染性能更高,因为可以避免模板解析过程。

render 函数的基本语法:

js
render: function (createElement) {
  return createElement('h1', 'Hello World!')   
}

createElement 的第一个参数是标签/组件,第二个参数是属性,第三个是子节点。
一个更复杂的例子:

js 
render (createElement) {  
  var children = [
    createElement('p', 'Paragraph 1'),
    createElement('p', 'Paragraph 2') 
  ]
  return createElement('div', {
    attrs: {
      id: 'container'
    }    
  }, children)    
} 

使用 render 函数和 JSX 的示例:

js
render(h) {
  return (
    <div id="container">  
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>
  )
}

与模板的区别:
模板:

html
<div id="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>  
</div>

相比模板,render 函数/JSX 具有更高的灵活性,但是可读性稍差,更适合提高性能的场景。
Vue 提供 render 函数让我们可以自定义组件的渲染方式。理解 render 的原理和用法,可以让我们在更为复杂的场景中发挥 Vue 的最大性能。