vue在绝大多数使用template是没问题的，但在某些场合下，使用render更适合。
一、render函数
1.createElement 参数
createElement 可接受三个参数
1）{String | Object | Function}，一个 HTML 标签字符串，组件选项对象，或者函数，必选参数
2）{Object}，一个包含模板相关属性的数据对象，可以在 template 中使用这些特性。可选参数
3）{String | Array}，子虚拟节点 (VNodes)，由 `createElement()` 构建而成，也可以使用字符串来生成“文本虚拟节点”。可选参数
2.深入data对象
{ // 和`v-bind:class`一样的 API // 接收一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, // 和`v-bind:style`一样的 API // 接收一个字符串、对象或对象组成的数组 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML 特性 attrs: { id: 'foo' }, // 组件 props props: { myProp: 'bar' }, // DOM 属性 domProps: { innerHTML: 'baz' }, // 事件监听器基于 `on` // 所以不再支持如 `v-on:keyup.enter` 修饰器 // 需要手动匹配 keyCode。 on: { click: this.clickHandler }, // 仅用于组件，用于监听原生事件，而不是组件内部使用 // `vm.$emit` 触发的事件。 nativeOn: { click: this.nativeClickHandler }, // 作用域插槽格式 // { name: props => VNode | Array<VNode> } scopedSlots: { default: props => createElement('span', props.text) }, // 如果组件是其他组件的子组件，需为插槽指定名称 slot: 'name-of-slot', // 其他特殊顶层属性 key: 'myKey', ref: 'myRef', } 下面两段代码是一样的：
template代码
<div> <h1 class="myClass" title="学习render函数">学习render函数</h1> <i style="color: #666">2019/02/15</i> </div>
render函数
render: function(createElement) { return createElement('div', null, [ createElement('h1', { class: 'myClass', attrs: { title: '学习render函数' } }, '学习render函数'), createElement('i', { style: 'color: #666' }, '2019/02/15'), ]); } 二、函数化组件
函数化组件是没有状态（响应式数据），没有实例（没有this，没有钩子函数）。函数式组件只是一个函数，所以渲染开销也低很多。
Vue.component('my-component', { functional: true, // Props 可选 props: { // ... }, // 为了弥补缺少的实例，提供第二个参数作为上下文 render: function (createElement, context) { // ... } }) context包含以下属性
props：提供所有 prop 的对象
children: VNode 子节点的数组
slots: 返回所有插槽的对象的函数
data：传递给组件的数据对象，作为 createElement 的第二个参数传入组件
parent：父组件
listeners: (2.3.0+) 一个包含了所有在父组件上注册的事件侦听器的对象。这只是一个指向 data.on 的别名。
injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。
例子：
export default { functional: true, props: { foo: { type: String, default: 'foo' } }, render: function(createElement, context) { return createElement('div', context.props.foo) } } 三、JSX语法和使用
用JSX语法写要比render函数简便，JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
1.表达式
JSX是支持表达式的，你需要将表达式写到{}内即可
<p>{0 < 1? 'true' : 'false'}</p> 2.指令
<input vModel="newTodoText" /> //有修饰符的指令 <input vOn:click_stop_prevent="newTodoText" />
3.组件
<MyComponent>hello</MyComponent>
4.属性
return <input type="email" /> //动态绑定 return <input type="email" placeholder={this.placeholderText} /> const inputAttrs = { type: 'email', placeholder: 'Enter your email' } return <input {...{ attrs: inputAttrs }} /> 5.class、style
可以是字符串、数组、对象，由花括号包裹着
//class class={'myclass'} class={['myclass']} class={{'myclass': true}} //style style={{color: '#666'}} style={[{color: '#666'}]} style={'color: #333'} 6.数组
JSX 允许在模板中插入数组，数组会自动展开所有成员
var arr = [ <p>p标签</p>, <h1>h1标签</h1> ] return ( <div> {arr} </div> ) 7.注释
注释需要写在花括号中
{/*注释...*/} 参考：
1.https://cn.vuejs.org/v2/guide/render-function.html
2.https://github.com/vuejs/jsx#installation
3.http://www.runoob.com/react/react-jsx.html