render的作用
render函数可以作为一道分割线，render函数的左边可以称之为编译期，将Vue的模板转换为渲染函数。render函数的右边是Vue的运行时，主要是基于渲染函数生成Virtual DOM树，Diff和Patch。
- render渲染函数将结合数据生成Virtual DOM的。
- 有了虚拟的DOM树后，再交给Patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。在这个过程中，Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中，侦测到数据来源之后就可以精确感知数据源的变动。
- 根据需要重新进行渲染。当重新进行渲染之后，会生成一个新的树，将新的树与旧的树进行diff对比，就可以最终落实到真实DOM上的改动。
一个简单的实例，看render：
vue的渲染机制可以总结如下图：
render前置操作
- 为何要用with(this){}包裹？
- 何时将render函数的字符串转成函数？
第1个问题？：render函数里面的变量必须要指向Vue实例
第2个问题？：经过parse生成AST和optimize对AST树的优化，会生成render函数的字符串。在下图框出的createCompilerCreator（在src\compiler\create-compiler.js），调用createCompileToFunctionFn将字符串转成函数。
createCompileToFunctionFn（在src\compiler\to-function.js）中，会优先读缓存信息，若没有才会执行编译方法，同时将render字符串通过createFunction(在src\compiler\to-function.js中)调用New Function()的方法，创造render函数，并且缓存信息。
function createFunction (code, errors) {
try {
return new Function(code)
} catch (err) {
errors.push({ err, code })
return noop
}
}复制代码render详解
render初始化入口：src\core\instance\index.js
renderMixin（在src\core\instance\render.js）主要做了三件事情
- 执行installRenderHelpers(Vue.prototype)，在原型上扩展如下，生成vnode节点的几个函数解析，在执行render函数时，会调用，这里先简单的看一个。
export function renderSlot ( name: string, fallback: ?Array, props: ?Object, bindObject: ?Object): ?Array { const scopedSlotFn = this.$scopedSlots[name] let nodes if (scopedSlotFn) { props = props || {} if (bindObject) { props = extend(extend({}, bindObject), props) } nodes = scopedSlotFn(props) || fallback } else { nodes = this.$slots[name] || fallback } const target = props && props.slot if (target) { return this.$createElement('template', { slot: target }, nodes) //调用createElemnet } else { return nodes }} 有作用域插槽，会合并props和需要绑定的对象，不然直接去$solt数组里取，最后会调用creatElement()复制代码 -
在原型上扩展Vue.prototype.$nextTick方法，在watch监听数据变化时，不会立马更新视图，会推到一个队列里，nextTick会触发视图的更新
-
在原型上扩展Vue.prototype._render。
//核心代码
vnode = render.call(vm._renderProxy, vm.$createElement)复制代码以上是render函数执行的核心代码，render归根结底，是调用createElement创建vnode节点下面会详细分析createElement到底做了哪些事情，首先我们先通过一个例子，来看下，createElement方法的入参，主要为3个入参，可通过一个例子呈现：
- 第一个参数是HTML标签字符 “必选”
- 第一个参数是HTML标签字符 “必选”
- 第三个参数是传涵盖子元素的一个数组 “可选”
"app">
createElement的详细解析过程
const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2
function createElement (context, tag, data, children, normalizationType, alwaysNormalize) {
// 兼容不传data的情况
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
if (alwaysNormalize) normalizationType = ALWAYS_NORMALIZE
// 调用_createElement创建虚拟节点
return _createElement(context, tag, data, children, normalizationType)
}
function _createElement (context, tag, data, children, normalizationType) {
// 如果存在data.__ob__，说明data是被Observer观察的数据，不能用作虚拟节点的data，返回一个空节点
if (data && data.__ob__) {
process.env.NODE_ENV !== 'production' && warn(
`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
'Always create fresh vnode data objects in each render!',
context
)
return createEmptyVNode()
}
// 当组件的tag未空,渲染一个空节点
if (!tag) {
return createEmptyVNode()
}
// 作用域插槽
if (Array.isArray(children) && typeof children[0] === 'function') {
data = data || {}
data.scopedSlots = { default: children[0] }
children.length = 0
}
// 根据normalizationType的值，选择不同的处理方法
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}
let vnode, ns
// 如果标签名是字符串类型
if (typeof tag === 'string') {
let Ctor
// 获取标签命名空间
ns = config.getTagNamespace(tag)
// 判断是否为保留标签
if (config.isReservedTag(tag)) {
// 如果是保留标签,就创建一个这样的vnode
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
// vm的components上查找是否有这个标签的定义
} else if ((Ctor = resolveAsset(context.$options, 'components', tag))) {
// 如果找到了这个标签的定义，就以此创建虚拟组件节点
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// 兜底方案，正常创建一个vnode
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
// 当tag不是字符串的时候，我们认为tag是组件的构造类，直接创建
} else {
vnode = createComponent(tag, data, context, children)
}
// 如果有vnode
if (vnode) {
// 应用namespace，绑定data，然后返回vnode
if (ns) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
}
}复制代码梳理成流程图如下：
特别注意当通过tag判断为组件时，会执行createcompontent()
总结
最后总结下render函数的编译的主要几个步骤：
- 将template字符串解析成ast
- 优化：将那些不会被改变的节点（statics）打上标记
- 生成render函数字符串，并用with包裹（最新版本有改为buble）
- 通过new Function的方式生成render函数并缓存
另外本文的重点是createElement如何生成一个vnode，接下来vnode如何映射到正式的dom上，是通过数据变化，通知vm.watcher，最终调用vm.update，最后调用patch方法映射到真实的dom节点中，这里涉及到数据双向绑定相关，请详见[vue]双向数据绑定。