探索Vue.js底层源码——render函数的createElement参数

引言

---

相信很多和我一样用 Vue 做开发的时候，是通过 template 写 HTML 代码开发项目的。而 Vue.js 在编译的时候是通过解析 template 标签，生成对应的 render 的函数的方式，渲染页面。并且 render 函数提供了createElement参数，他是一个 Function，提供给开发者创建 Vritual Dom 模板。那么，接下来我们就来认识一下 createElement。

createElement

---

在 render 函数中，createElement 是用于创建 Virtual Dom 的模板，它有三个参数：
1.第一个参数，必选，可以是一个组件、函数、或者是要创建的 HTML 标签名（例如”div“、”p“等等）

2.第二个参数，可选，是一个对象用于创建 Virutal Dom 的相关属性值，例如 class、style、props 等等

	{
		'class': {},
		style: {},
		attrs: {},
		props: {},
		domProps: {},
		on: {},
		nativeOn: {},
		directives: [],
		scopedSlots: {},
		slot: string,
		key: string,
		ref: string
	}

4.第三个参数（数组类型），可选，用于创建该 Vritual Dom 的子节点。

例如：
用 template 创建的 HTML

	<template>
		<div class="div1">
			<p>1111</p>
		</div>
	</template>

对应的 render 中的 createElement 的写法

	render(createElement) {
		return createElement('div', {
			'class': 'div1'
		},
		[
			createElement('p', {
				domProps: {
					innerHTML: '11111'
				}
			}
		]
	}

当前 Vue.js 官方文档也对创建 Vritual 的方式进行了相应的导读，大家也可以去参考一下官网的讲解。