Vue之render方法

发表于 | 分类于

render

Vue的_render方法是实例的一个私有方法，它用来把实例渲染成一个虚拟Node。它的定义在src/core/instance/render.js文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Vue.prototype._render = function (): VNode {
	const vm: Component = this
	const { render, _parentVnode } = vm.$options
	
	// reset _rendered flag on slots for duplicate slot check
	if (process.emv.NODE_ENV !== 'production') {
		for (const key in vm.$slots) {
			// $flow-disable-line
			vm.$slots[key].rendered = false
		}
	}
	
	if (_parentVnode) {
		vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
	}
	
	// set parent vnode. this allows render functions to have access
	// to the data on the placeholder node.
	vm.$vnode = _parentVnode
	// render self
	let vnode
	try {
		vnode = render.call(vm._renderProxy, vm.$createElement)
	} catch (e) {
		handleError(e, vm, `render`)
		// return error render result
		// or previous vnode to prevent render error causing blank component
	}
}

这段代码最关键的是render方法的调用，我们在平时的开发工作中手写render方法的场景比较少，而写的比较多的是template模板，在之前的mounted方法的实现中，会把template编译成render方法，但这个编译过程是非常复杂的，这里暂不讨论。

在Vue的官方文档中介绍了render函数的第一个参数是createElement，那么结合之前的例子：

1
2
3
<div id="app">
	{{message}}
</div>

相当于我们编写如下render函数：

1
2
3
4
5
6
7
render: function (createElement) {
	return createElement('div', {
		attrs: {
			id: 'app'
		},
	}, this.message)
}

再回到_render函数中的render方法的调用:

1
vnode = render.call(vm._renderProxy, vm.$createElement)

可以看到，render函数中的createElement方法就是vm.$createElement方法：

1
2
3
4
5
6
7
8
9
10
11
export function initRender (vm: Component) {
	// ...
	// bind the createElement fn to this instance
	// so that we get proper render context inside it.
	// args order: tag, data, children, normalizationType, alwaysNormalize
	// internal version is used by render functions compiled from templates
	vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
	// normalization is always applied for the public version, used in
	// user-written render functions.
	vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
}

实际上，vm.\$createElement方法定义是在折行initRender方法的时候，可以看到除了vm.\$createElement方法，还有一个vm._c方法，它是被模板编译成的render函数使用，而vm.$createElement是用户手写render方法使用的，这两个方法支持的参数相同，并且内部都调用了createElement方法。

总结

vm._render最终是通过执行createElement方法并返回的是vnode，它是一个虚拟Node。Vue2.0相比Vue1.0最大的升级就是利用了Virtual DOM。因此在分析createElement的实现前，我们先了解一下Virtual DOM的概念。