export function initRender (vm: Component) {
** other code **
// 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)
** other code **
}
vm._render
_render
方法是在文件/src/core/instance/render.js
中定义的一个方法,它用来把实例渲染成一个虚拟 Node,看一下代码(有点儿复杂,我要慢慢读。。。):这里主要是处理
render
操作,那么render
函数的调用尤显重要,而在开发中手写render
方法的场景少之又少,最多的还是直接用template
模板;在之前的mounted
方法学习中发现会把template
编译成render
方法,而Vue
在官方的文档中介绍了render
的第一个参数是createElement
,即看下面的例子:相当于编写的
render
函数如下:再回到当前文件
_render
方法中的render
调用:这里的
vm.$createElement
就是render
函数中的createElement
方法;而vm.$createElement
方法定义是在initRender
中,如下:initRender
除了vm.$createElement
方法外还有一个vm._c
方法,而它是被模板编译成的render
函数使用,vm.$createElement
是用户手写的render
方法使用,这两个方法不仅支持的参数相同,且内部都调用了createElement
方法;前面就是对vm._render
的基本认识,而本节出现最多的就是虚拟domvnode
,那什么是虚拟dom,下面来一波 Virtual DOM。