vue 是如何将编译器中的代码转换为页面真实元素的？
这个过程涉及到模板编译成 AST 语法树，AST 语法树构建渲染函数，渲染函数生成虚拟 dom，虚拟 dom 编译成真实 dom 这四个过程。
解读代码之前，先看一张 vue 编译和渲染的整体流程图:
vue 会把用户写的代码中的
标签中的代码解析成 AST 语法树，再将处理后的 AST 生成相应的 render 函数，render 函数执行后会得到与模板代码对应的虚拟 dom，最后通过虚拟 dom 中新旧 vnode 节点的对比和更新，渲染得到最终的真实 dom。有了这个整体的概念我们再来结合源码分析具体的数据渲染过程。
vue 中是通过 mount 实例方法去挂载 vm 的，数据渲染的过程就发生在
vm.mount
阶段。
在这个方法中，最终会调用
mountComponent
方法来完成数据的渲染。
我们结合源码看一下其中的几行关键代码：
updateComponent = () => {
vm._update(vm._render(), hydrating) // 生成虚拟dom，并更新真实dom
}
这是在
mountComponent
方法的内部，会定义一个
updateComponent
方法，在这个方法中 vue 会通过
vm._render()
函数生成虚拟 dom，并将生成的 vnode 作为第一个参数传入
vm._update()
函数中进而完成虚拟 dom 到真实 dom 的渲染。
第二个参数
hydrating
是跟服务端渲染相关的，在浏览器中不需要关心。
这个函数最后会作为参数传入到 vue 的 watch 实例中作为
getter
函数，用于在数据更新时触发依赖收集，完成数据响应式的实现。
这个过程不在本文的介绍范围内，在这里只要明白，当后续 vue 中的 data 数据变化时，都会触发
updateComponent
方法，完成页面数据的渲染更新。
具体的关键代码如下：
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
// 触发beforeUpdate钩子
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */
)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
vm._isMounted = true
// 触发mounted钩子
callHook(vm, 'mounted')
}
return vm
}
代码中还有一点需要注意的是，在代码结束处，会做一个判断，当 vm 挂载成功后，会调用 vue 的 mounted 生命周期钩子函数。
这也就是为什么我们在 mounted 钩子中执行代码时，vm 已经挂载完成的原因。
接下来具体分析 vue 生成虚拟 dom 的过程。
前面说了这一过程是调用
vm._render()
方法来完成的，该方法的核心逻辑是调用
vm.$createElement
方法生成 vnode，代码如下：
vnode = render.call(vm._renderProxy, vm.$createElement)
其中
vm.renderProxy
是个代理，代理 vm，做一些错误处理，
vm.$createElement
是创建 vnode 的真正方法，该方法的定义如下：
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
可见最终调用的是
createElement
方法来实现生成 vnode 的逻辑。
在进一步介绍
createElement
方法之前，我们先理清楚两个个关键点：
render 方法的来源
在 vue 内部其实定义了两种 render 方法的来源，一种是如果用户手写了 render 方法，那么 vue 会调用这个用户自己写的 render 方法，即下面代码中的
vm.$createElement
；另外一种是用户没有手写 render 方法，那么vue内部会把 template 编译成 render 方法，即下面代码中的 vm._c。不过这两个 render 方法最终都会调用
createElement
方法来生成虚拟 dom。
// 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)
vnode 就是用一个原生的 js 对象去描述 dom 节点的类。
因为浏览器操作 dom 的成本是很高的，所以利用 vnode 生成虚拟 dom 比创建一个真实 dom 的代价要小很多。
vnode 类的定义如下：
export default class VNode {
tag: string | void; // 当前节点的标签名
data: VNodeData | void; // 当前节点对应的对象
children: ?Array; // 当前节点的子节点
text: string | void; // 当前节点的文本
elm: Node | void; // 当前虚拟节点对应的真实dom节点
....
/*创建一个空VNode节点*/
export const createEmptyVNode = (text: string = '') => {
const node = new VNode()
node.text = text
node.isComment = true
return node
}
/*创建一个文本节点*/
export function createTextVNode (val: string | number) {
return new VNode(undefined, undefined, undefined, String(val))
}
....
可以看到 vnode 类中仿照真实 dom 定义了很多节点属性和一系列生成各类节点的方法。
通过对这些属性和方法的操作来达到模仿真实 dom 变化的目的。
createElement
有了前面两点的知识储备，接下来回到
createElement
生成虚拟 dom 的分析。
createElement
方法中的代码很多，这里只介绍跟生成虚拟 dom 相关的代码。该方法总体来说就是创建并返回一个 vnode 节点。在这个过程中可以拆分成三件事情：
2. 根据不同的情形创建不同的 vnode 节点类型；
子节点的规范化处理
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}
为什么会有这个过程，是因为传入的参数中的子节点是 any 类型，而 vue 最终生成的虚拟 dom 实际上是一个树状结构，每一个 vnode 可能会有若干个子节点，这些子节点应该也是 vnode 类型。
所以需要对子节点处理，将子节点统一处理成一个 vnode 类型的数组。
同时还需要根据 render 函数的来源不同，对子节点的数据结构进行相应处理。
创建 vnode 节点
这部分逻辑是对 tag 标签在不同情况下的处理，梳理一下具体的判断case如下：
1. 如果传入的 tag 标签是字符串，则进一步进入下列第 2 点和第 3 点判断，如果不是字符串则创建一个组件类型 vnode 节点。
2. 如果是内置的标签，则创建一个相应的内置标签 vnode 节点。
3. 如果是一个组件标签，则创建一个组件类型 vnode 节点。
4. 其他情况下，则创建一个命名空间未定义的 vnode 节点。
let vnode, ns
if (typeof tag === 'string') {
let Ctor
// 获取tag的名字空间
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
// 判断是否是内置的标签，如果是内置的标签则创建一个相应节点
if (config.isReservedTag(tag)) {
// platform built-in elements
if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
warn(
`The .native modifier for v-on is only valid on components but it was used on .`,
context
)
}
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
// 如果是组件，则创建一个组件类型节点
// 从vm实例的option的components中寻找该tag，存在则就是一个组件，创建相应节点，Ctor为组件的构造类
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
//其他情况，在运行时检查，因为父组件可能在序列化子组件的时候分配一个名字空间
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// direct component options / constructor
// tag不是字符串的时候则是组件的构造类，创建一个组件节点
vnode = createComponent(tag, data, context, children)
}
这部分同样也是一些 if/else 分情况的处理逻辑：
1. 如果 vnode 成功创建，且是一个数组类型，则返回创建好的 vnode 节点
2. 如果 vnode 成功创建，且有命名空间，则递归所有子节点应用该命名空间
3. 如果 vnode 没有成功创建则创建并返回一个空的 vnode 节点
if (Array.isArray(vnode)) {
// 如果vnode成功创建，且是一个数组类型，则返回创建好的vnode节点
return vnode
} else if (isDef(vnode)) {
// 如果vnode成功创建，且名字空间，则递归所有子节点应用该名字空间
if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
// 如果vnode没有成功创建则创建空节点
return createEmptyVNode()
}
vm._update()
做的事情就是把
vm._render()
生成的虚拟 dom 渲染成真实 dom。
_update()
方法内部会调用
vm.__patch__
方法来完成视图更新，最终调用的是
createPatchFunction
方法，该方法的代码量和逻辑都非常多，它定义在
src/core/vdom/patch.js
文件中。下面介绍下具体的 patch 流程和流程中用到的重点方法：
重点方法
1. createElm：
该方法会根据传入的虚拟 dom 节点创建真实的 dom 并插入到它的父节点中
2. sameVnode：
判断新旧节点是否是同一节点。
3. patchVnode：
当新旧节点是相同节点时，调用该方法直接修改节点，在这个过程中，会利用 diff 算法，循环进行子节点的的比较,进而进行相应的节点复用或者替换。
4. updateChildren方法：
diff 算法的具体实现过程
patch 流程
第一步：
判断旧节点是否存在，如果不存在就调用 createElm() 创建一个新的 dom 节点，否则进入第二步判断。
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
}
第二步：
