Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用**渲染函数**，它比模板更接近编译器。
> 在组件选项中有一个渲染函数`render 函数`,而`createElement`是`render 函数`的参数，它本身也是个函数，并且有三个参数。
## **一：createElement()**
>[success] **createElement()函数用于创建虚拟DOM元素**
第一个参数：**HTML标签名`**或者**`一个组件对象`**或者**`一个 async 函数 。必填项**
第二个参数：一个与模板中属性对应的`数据对象`。可选。
第三个参数：子元素虚拟节点 (VNodes)，由 `createElement()` 构建而成, 也可以使用`字符串`来生成`文本虚拟节点`。可选
注意：有时候我们可以直接忽略第二个参数，vue会根据传递参数的数据类型，自动判断传递的是第几个参数，如果传递对象就是第二个参数，如果传递数组或字符串就是第三个参数。
```
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签名、组件选项对象，或者
// resolve 了上述任何一种的一个 async 函数。必填项。
'div',
// {Object}
// 一个与模板中属性对应的数据对象。可选。
{
// (详情见下一节)
},
// {String | Array}
// 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，
// 也可以使用字符串来生成“文本虚拟节点”。可选。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
```
## **二：createElement()的第二个参数——数据对象**
在使用模版中，我们绑定属性使用到`v-bind:class`和`v-bind:style`这样的语法，但在虚拟DOM元素中，这样的语法将会写在数据对象中。该对象可以绑定普通的 HTML 特性，也可以绑定如`innerHTML`这样的 DOM 属性 (这会覆盖`v-html`指令)
### **数据对象：**
```
{
// class绑定 等价于 v-bind:class
// 接受一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
// 样式绑定，等价于 v-bind:style
// 接受一个字符串、对象，或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 prop
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听写在`on`属性中
// 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
// 需要在处理函数中手动检查 keyCode。
on: {
click: this.clickHandler
},
// 仅用于组件，用于监听原生事件，而不是组件内部使用
// `vm.$emit` 触发的事件。
// 监听自定义事件
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
// 赋值，因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽的格式为
// { name: props => VNode | Array<VNode> }
// 函数参数是传递的数据
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其它组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其它特殊顶层属性
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
}
```
常用的数据对象选项：
1. class：控制类名
2. style ：样式
3. attrs ：用来写正常的 html 属性 id src 等等
4. domProps :用来写原生的dom 属性
5. on：用来写原生方法
>[info] 在使用时，有时候我们会省略第二个参数，只写第一、第三个参数。那么为什么能跳过第二个参数呢？关键就在于参数的数据类型。第二个参数是**对象**类型，第三个参数是**字符串**或者**数组**，vue内部根据参数的类型判断传入的是那个参数。
实例：
**HTML模版**：
```
<h1>
<a name="hello-world" href="#hello-world">
Hello world!
</a>
</h1>
```
**使用渲染函数**：
```
Vue.component('anchored-heading', {
render: function (createElement) {
// 创建 kebab-case 风格的 ID
var headingId = getChildrenTextContent(this.$slots.default)
.toLowerCase()
.replace(/\W+/g, '-')
.replace(/(^-|-$)/g, '')
return createElement(
'h' + this.level, //h标签
[
createElement('a', { //h标签内部的a标签
attrs: {
name: headingId, //a标签的name属性
href: '#' + headingId //a标签的href属性
}
}, this.$slots.default) //a标签里面的内容，这里传入的是Hello world!
]
)
},
props: {
level: {
type: Number,
required: true
}
}
```
### **约束**
**虚拟节点必须唯一**
组件中的所有 VNode 必须是唯一的。例如,下面的渲染函数是不合法的：
```
render: function (createElement) {
var myParagraphVNode = createElement('p', 'hi')
return createElement('div', [
// 错误 - 重复的 VNode
myParagraphVNode, myParagraphVNode
])
}
```
如果需要渲染重复的虚拟节点，可以使用工厂函数实现：
```
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}
```
## **三：使用 JavaScript 代替模板功能**
渲染函数本身就是一个函数，所以可以写任意JavaScript代码。
### **1.`v-if`和 `v-for`**
在模板中使用的 v-if 和 v-for：
```
<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
```
这些都可以在渲染函数中用 JavaScript 的 if/else 和 map 来重写：
```
props: ['items'],
render: function (createElement) {
if (this.items.length) {
return createElement('ul', this.items.map(function (item) {
return createElement('li', item.name)
}))
} else {
return createElement('p', 'No items found.')
}
}
```
### **2.`v-model`**
渲染函数中没有与`v-model`的直接对应——你必须自己实现相应的逻辑：
```
props: ['value'],
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.$emit('input', event.target.value)
}
}
})
}
```
等价于模版：
```
<input value="value" @input="$emit('input',$event.target.value)"></input>
```
这就是深入底层的代价，但与 v-model 相比，这可以让你更好地控制交互细节。
### **3.事件 & 按键修饰符**
对于`.passive`、`.capture`和`.once`这些事件修饰符, Vue 提供了相应的前缀可以用于`on`：
| 修饰符 | 前缀 |
| --- | --- |
| `.passive` | `&` |
| `.capture` | `!` |
| `.once` | `~` |
| `.capture.once`或 | |
| `.once.capture` | `~!` |
例如:
~~~
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}
~~~
对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：
| 修饰符 | 处理函数中的等价操作 |
| --- | --- |
| `.stop` | `event.stopPropagation()` |
| `.prevent` | `event.preventDefault()` |
| `.self` | `if (event.target !== event.currentTarget) return` |
| 按键： | |
| `.enter`,`.13` | `if (event.keyCode !== 13) return`(对于别的按键修饰符来说，可将`13`改为[另一个按键码](http://keycode.info/)) |
| 修饰键： | |
| `.ctrl`,`.alt`,`.shift`,`.meta` | `if (!event.ctrlKey) return`(将`ctrlKey`分别修改为`altKey`、`shiftKey`或者`metaKey`) |
这里是一个使用所有修饰符的例子：
~~~
on: {
keyup: function (event) {
// 如果触发事件的元素不是事件绑定的元素
// 则返回
if (event.target !== event.currentTarget) return
// 如果按下去的不是 enter 键或者
// 没有同时按下 shift 键
// 则返回
if (!event.shiftKey || event.keyCode !== 13) return
// 阻止 事件冒泡
event.stopPropagation()
// 阻止该元素默认的 keyup 事件
event.preventDefault()
// ...
}
}
~~~
### **4.插槽**
可以通过 `this.$slots` 访问静态插槽的内容，每个插槽都是一个`VNode` 数组
模版写法：
```
<div><slot></slot></div>
```
渲染函数写法:
```
render: function (createElement) {
return createElement('div', this.$slots.default) //this.$slots.default是默认插槽的内容，注意是虚拟节点数组
}
```
也可以通过`this.$scopedSlots`访问作用域插槽，每个作用域插槽都是一个返回若干 VNode 的函数：
模版写法：
```
<div><slot :text="message"></slot></div>
```
渲染函数写法：
~~~
props: ['message'],
render: function (createElement) {
return createElement('div', [
this.$scopedSlots.default({
text: this.message
})
])
}
~~~
如果要用渲染函数向子组件中传递作用域插槽，可以利用 VNode 数据对象中的`scopedSlots`字段：
模版写法：
```
<div>
<child slot-scope="default">
<span>{{default.text}}</span>
</child>
</div>
```
渲染函数写法：
~~~
render: function (createElement) {
return createElement('div', [
createElement('child', {
// 在数据对象中传递 `scopedSlots`
// 格式为 { name: props => VNode | Array<VNode> }
scopedSlots: {
default: function (props) {
return createElement('span', props.text)
}
}
})
])
}
~~~
## **四：JSX**
如果你写了很多`render`函数，可能会觉得下面这样的代码写起来很痛苦：
~~~
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
~~~
特别是对应的模板如此简单的情况下：
~~~
<anchored-heading :level="1">
<span>Hello</span> world!
</anchored-heading>
~~~
这就是为什么会有一个[Babel 插件](https://github.com/vuejs/jsx)，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。
~~~
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render: function (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
~~~
>[danger] 将`h`作为`createElement`的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的[3.4.0 版本](https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection)开始，我们会在以 ES5 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入`const h = this.$createElement`，这样你就可以去掉`(h)`参数了。对于更早版本的插件，如果`h`在当前作用域中不可用，应用会抛错。
