vue2的render函数详解
目录
一. render 函数与template标签
二. render 函数讲解
优点：
三. render 函数的参数（createElement）
1. 基础代码
2. 复杂一些的代码
3. 不能共存的情况
四. 一些汇总
一. render 函数与template标签
render函数和template一样，都是用来创建html模板的，但是有些场景里使用template实现起来会使代码冗余且复杂，因此产生了render函数。
注意，render和template标签无法一起使用，即当你在项目里使用了template标签的时候，render()函数将会失效。
二. render 函数讲解
render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement
render 函数的返回值（VNode）
VNode（virtual node 虚拟节点），也就是我们要渲染的节点。
优点：
-
在开发时，可以使用JavaScript的逻辑处理来生成虚拟DOM节点，这可以帮助开发者更好的控制组件的渲染逻辑。
-
Render函数输出的是虚拟DOM节点，所以可以在开发时，更好地掌握组件的渲染效果，并根据需要进行优化。
-
Render函数可以处理一些复杂的案例，例如：渲染函数需要发起异步请求，进行数据处理后才能渲染页面。而模板中无法实现此类操作。
三. render 函数的参数（createElement）
createElement是render 函数的参数，它本身也是个函数，并且有三个参数
- 一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的一个 async 函数，类型:{ String | Object | Function }，
必填项- 一个与模板中 attribute 对应的数据对象，类型：{ Object }，
可选- 子级虚拟节点 ( VNodes )，由
createElement()构建而成，也可以使用字符串来生成 “文本虚拟节点”，类型：{ String | Array }，可选
1. 基础代码
注意这里是相当于新建了一个组件，所以要在template里面使用标签
import Vue from 'vue'
Vue.component('my-component', {
render: function(h) {
return h('div', 'Hello World')
}
})2. 复杂一些的代码
import Vue from 'vue'
Vue.component('my-component', {
props: ['title', 'list'],
render: function(h) {
var listItems = this.list.map(function(item) {
return h('li', item)
})
return h('div', [
h('h1', this.title),
h('ul', listItems)
])
}
})3. 不能共存的情况
123
在上述代码中，因为定义了template标签，如果再使用render()函数去直接写一个虚拟DOM，这样子会发现只渲染了123，而没有显示’Hello World‘，这是因为这两个不能够共存，而templat的优先级明显高于render()
运行结果
四. 一些汇总
/**
* render: 渲染函数
* @param {Function} createElement
* @returns {VNode}
*/
render: createElement => {
return createElement(
// 1. 第一个参数，要渲染的标签名称【必需】
'div',
// 2. 第二个参数，1中渲染的标签的属性【可选】，不使用此参数，用 null 占位
{
// 与 `v-bind:class` 的 API 相同，
// 接受一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
// 与 `v-bind:style` 的 API 相同，
// 接受一个字符串、对象，或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML attribute
attrs: {
id: 'foo'
},
// 组件 prop
props: {
myProp: 'bar'
},
// DOM property
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 }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其它组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其它特殊顶层 property
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
},
// 3. 第三个参数，1中渲染的标签的子元素数组【可选】，不使用此参数，用 null 占位 或不写
[
createElement(
'span',
null,
'友情链接'
)，
createElement(
'a',
{
attrs: {
href: 'https://www.baidu.com'
}
},
'百度'
)
]
)
} 将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的const h = this.$createElement，这样你就可以去掉 (h) 参数了
render: h => h(App)