在Vue中，我们都是绝大部分都是使用template来创建html,框架给予了很好的支持，使用起来也很方便，符合常规的编程方式。但是在一些特殊的场景需要有特殊的判断时，使用template显得会低效率，并且代码的可读性也不高。此时我们可以用到render函数，使用javascript的完全编程能力来实现html的创建。
情景：
//要求是通过size的值来动态生成title-size标签的组件
< title-size :size="1">Hello world!< /title-size>
此时采用之前的常规做法，我们会选择
< script type="text/x-template" id="titleSize-template">
< h1 v-if="size === 1">
< slot>< /slot>
< /h1>
< h2 v-else-if="size === 2">
< slot>< /slot>
< /h2>
< h3 v-else-if="size === 3">
< slot>< /slot>
< /h3>
< h4 v-else-if="size === 4">
< slot>< /slot>
< /h4>
< h5 v-else-if="size === 5">
< slot>
< /h5>
< h6 v-else-if="size === 6">
< slot>
< /h6>
< /script>
Vue.component('anchored-heading', {
template: '#titleSize-template',
props: {
size: {
type: Number,
required: true
}
}
})
此时的组件根据prop取到的数据size值进行选择标签的类型，从而完成动态生成title-size标签的组件。但是这样的话是我们在template中定义不同的h1~h6的标签，然后再去根绝size的值来决定取得是哪个标签，这样的话在数据的处理上显得被动不灵活。并且用这种方式处理时，需要重复使用< slot>< /slot>来插入title-size的内容，反正总结起来就是低效。
此时可以尝试render函数重写上面的例子
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.size, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
size: {
type: Number,
required: true
}
}
})
此时就显得很灵活，直接根据传入的size值进行创建对应的标签，并且也不需要再写那么多冗长的代码了。
注释： this.$slots.default对用 template的的使用没有name（作用相当于以上例子中的slot标签）
节点、树以及虚拟 DOM
深入渲染函数之前，我们需要了解一些浏览器的工作原理，当浏览器读html代码时，它会建立一个“DOM 节点”树来保持追踪。每个元素都是一个节点。每片文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。js的运行速度是很快的，但是dom的渲染确实很慢的，往往是影响性能的一个重要因素。
但是vue是数据驱动的，不需要我们去手动更新节点。只需要告诉 Vue 你希望页面上的 HTML 是什么
< h1>{{ testData }}< /h1>
render: function (createElement) {
return createElement('h1', this.testData)
}
当数据发生改变时，页面的dom都会被及时高效的去渲染，而不需要自己去做其他的处理。
虚拟 DOM
Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。可以做个例子：
return createElement('h1', this.testData)
createElement 返回的是什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
createElement 参数
// @returns {VNode} 返回的是一个描述对象它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者
// 解析上述任何一种的一个 async 异步函数，必要参数。
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样，可以在 template 中使用这些属性。可选参数。
{
},
// {String | Array}
// 子节点 (VNodes)，由 `createElement()` 构建而成，
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一条数据'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
深入 data 对象
在使用data时要注意：在模板语法中，v-bind:class 和 v-bind:style ，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如 innerHTML (这会取代 v-html 指令)。（此处的官方文档写的很全了，就直接拿过来了）
{
// 和`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
},
// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
// 赋值，因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
