神秘的开始
vue version： 2.6.11
vue2源码的目录结构：
- compiler：编译相关，把模板解析成AST语法树，语法树优化，代码生成
- core：vue.js核心代码
- platform：支持web和配合weex运行在native客户端
- server：服务端渲染的相关逻辑
- sfc：把.vue文件解析成javascript，为了webpack的构建工作
- shared：被浏览器端的vue.js和服务端的vue.js共享的工具方法
Vue本质上用Function实现的类，在原型和自身扩展了一些属性和方法。
为什么不用类实现？用函数实现可以把对Vue的扩展分散到多个模块去实现，而不是在一个模块中实现所有，更利于代码的维护和管理，类做不到这一点。
new vue 发生了什么
Vue方法通过new关键字示例化，调用_init方法，初始化时合并配置，初始化生命周期、事件中心、渲染、data、props、computed、watcher等。
export
Vue.prototype._init = function (options?: Object) {
// 将 this（实际上就是 Vue） 赋值给 vm
const vm: Component = this
// 每个 vue 实例都有一个 uid，并且 uid 往上递增
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
vm._isVue = true
// 组件初始化时的配置合并（通过判断 options 上有没有 _isComponent 属性来确定是否是组件）
if (options && options._isComponent) {
/**
* 每个子组件初始化时走这里，这里只做了一些性能优化
* 将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率
*/
initInternalComponent(vm, options)
} else {
// new Vue 时的配置合并（new Vue 传入的是用户配置，需要和系统配置合并）
// 进行 options 的合并,并挂载到 Vue.$options 上，那么 $options.data 可以访问到 data
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
if (process.env.NODE_ENV !== 'production') {
// 设置代理，将 vm 实例上的属性代理到 vm._renderProxy
initProxy(vm)
} else {
vm._renderProxy = vm
}
vm._self = vm
// 初始化组件实例关系属性，比如 $parent、$children、$root、$refs、_watcher、_isMounted 等等
initLifecycle(vm)
// 初始化事件系统，例如 v-on 或者 @ 定义的事件
initEvents(vm)
// 解析插槽 slot，得到 vm.$slot
// 定义了 vm._c 方法，用于处理 template 模式
// 定义了 vm.$createElement，用于处理手写 render 模式
// 无论是 vm._c 还是 vm.$createElement 最终都会调用 createElement 方法
// 将 vm.$attrs、vm.$listeners 转换为响应式
initRender(vm)
// 调用 beforeCreate 生命周期钩子
// beforeCreate 之前三个处理都和数据无关
// 在 beforeCreate 生命周期中只能访问上面三个操作相关的内容
// 当前周期中是没有数据的，所以在此期间不要做数据操作
callHook(vm, 'beforeCreate')
// 初始化组件的 inject 注入配置项（处理注入祖辈传递下来的数据）
// inject 是需要和 provide 配合使用的
// 父组件通过 provide 提供数据，其他组价可以使用 inject 注入数据
initInjections(vm) // resolve injections before data/props 在 data/props 之前解决注入
// 初始化 state, props, methods, computed, watch
// 其中初始化state, props, methods时，会遍历 data 中所有的 key，检测是否在 props，methods 重复定义
// props变量有多种写法，vue会进行统一转化，转化成{ a: {type: "xx", default: 'xx'} } 形式
// 将 data, props 都挂载到vm._data, vm._props上。设置访问数据代理，访问this.xx，实际上访问的是 vm._data[xx], vm._props[xx]
// 给 _data, _props 添加响应式监听
initState(vm)
// 解析组件配置项上的 provide 对象，再挂载一份到 vm._provided 属性上（原本在 vm.$options.provide 上）
initProvide(vm) // resolve provide after data/props
// 调用 create 生命周期钩子
// 在 beforeCreate 和 create 之间做了一系列的数据处理
// 所以在 create 生命周期可以访问到数据
callHook(vm, 'created')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
// 最后, 如果有根元素，那么就挂载
// options = { el: "#app", data: {}, methods: {}, ... }
// 有 el 选项，自动调用 $mount 方法，就不需要再手动调用 $mount
// 没有 el 则必须手动调用 $mount
if (vm.$options.el) {
// 调用 $mount 方法，进入挂载阶段
vm.$mount(vm.$options.el)
}
}
}挂载过程($mount) 无论用单文件组件(.vue)方式开发组件或者使用el或template属性，最终都会转成render方法。
js
// 首先缓存了原型上的 $mount 方法，原型上的 $mount 最先在 `src/platform/web/runtime/index.js` 中定义
const mount = Vue.prototype.$mount
// 再重新定义 $mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
// 获取挂载元素
// 通过 query 将 el 转化为 dom 对象
// 这里的 el 可能是 string 类型，也可能是 element 类型
// 如果是 string，那么通过 document.query(el) 转换为 element
el = el && query(el)
/* istanbul ignore if */
// 对 el 做了限制，Vue 不能挂载在 body 、 html 这样的根节点上， 因为其会覆盖
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
// 如果有 render 函数，直接执行 mount.call(this, el, hydrating)
// 没有 render，代表的是 template 模式，就编译 template，转化为 render 函数，再调用 mount
if (!options.render) {
// 没有 render 函数
let template = options.template
// 获取到 template 模板
if (template) {
// 如果创建的时候有传 template，以 template 为准，没传，就取 el
if (typeof template === 'string') {
// 如果 template 是 '#xxx'，那么根据 id 选择器获取 template 内容
if (template.charAt(0) === '#') {
// template 是一个 id 选择器，则获取该元素的 innerHtml 作为模版
// { template: '#app' }
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
// 如果 tempalte 是一个正常的元素，那么通过 template.innerHTML 得到 template
template = template.innerHTML
} else {
// 其他类型为非法传入
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
// 如果没有传入 template 模板，则默认以 el 元素所属的根节点作为基础模板
// new Vue({ el: '#app' })
template = getOuterHTML(el)
}
// 模板准备就绪，进入编译阶段
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
// compileToFunctions 执行编译的函数（将 template 转化为 render）
// compileToFunctions 方法会返回 render 函数方法，render 方法会保存到 vm.$options 中
const { render, staticRenderFns } = compileToFunctions(template, {
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
// render 方法保存到 options 中
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile end')
measure(`vue ${this._name} compile`, 'compile', 'compile end')
}
}
}
// 无论是 template 模板还是手写 render 函数最终调用缓存的 $mount 方法
return mount.call(this, el, hydrating)
}原型上的$mount方法
js
// 首次定义 $mount 方法
// public mount method
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
// 判断 el 有没有存在以及是不是浏览器环境，两个条件都符合，那么就会通过 query 查找到元素
el = el && inBrowser ? query(el) : undefined
// 调用 mountComponent 并将结果返回
return mountComponent(this, el, hydrating)
}mountComponent函数实例化渲染Watcher，在回调函数中调用updateComponent方法。updateComponent方法中调用vm._render生成虚拟Node,调用vm._update更新DOM。
js
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
// 首先将 el 做缓存
vm.$el = el
// 如果没有 render 函数
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
warn(
'You are using the runtime-only build of Vue where the template ' +
'compiler is not available. Either pre-compile the templates into ' +
'render functions, or use the compiler-included build.',
vm
)
} else {
warn(
'Failed to mount component: template or render function not defined.',
vm
)
}
}
}
// 挂载 beforeMount 生命周期钩子
callHook(vm, 'beforeMount')
let updateComponent
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
updateComponent = () => {
const name = vm._name
const id = vm._uid
const startTag = `vue-perf-start:${id}`
const endTag = `vue-perf-end:${id}`
mark(startTag)
const vnode = vm._render()
mark(endTag)
measure(`vue ${name} render`, startTag, endTag)
mark(startTag)
vm._update(vnode, hydrating)
mark(endTag)
measure(`vue ${name} patch`, startTag, endTag)
}
} else {
// 定义 updateComponent 函数作为 Watcher 的回调函数
updateComponent = () => {
// vm._render 函数渲染成虚拟 DOM， vm._update 将虚拟 DOM 渲染成真实的 DOM
vm._update(vm._render(), hydrating)
}
}
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
/**
* vm 当前实例
* updateComponent 函数
* noop 这里指空函数 在 util/index 中定义
* {} 配置
* 魔法注释：isRenderWatcher 标记是否渲染 watcher
*/
// new Watcher 会执行 Watcher 的构造函数 Constructor
// Constructor 中会调用 Watcher.get 去执行 updateComponent
// Watcher 在这个有2个作用：
// 1、初始化的时候会执行回调函数(首次渲染)
// 2、当 vm 实例中的监测的数据发生变化的时候执行回调函数(响应式)
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
// vm.$vnode 表示 Vue 实例的父虚拟 node，为 null 则表示 当前是根 Vue 实例
// 设置 vm._isMounted 为 true，表示该实例已经挂载
// 最后调用 mounted 生命周期钩子函数
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}render方法把示例渲染成虚拟Dom。Vue.js中的虚拟Dom借鉴snabbdom库实现，另外加入一些东西。
js
Vue.prototype._render = function (): VNode {
const vm: Component = this
const { render, _parentVnode } = vm.$options
if (_parentVnode) {
vm.$scopedSlots = normalizeScopedSlots(
_parentVnode.data.scopedSlots,
vm.$slots,
vm.$scopedSlots
)
}
// set parent vnode. this allows render functions to have access
// to the data on the placeholder node.
// 设置父 VNode
vm.$vnode = _parentVnode
// render self
let vnode
try {
// There's no need to maintain a stack because all render fns are called
// separately from one another. Nested component's render fns are called
// when parent component is patched.
currentRenderingInstance = vm
// 执行 render 函数，生成 VNode
// vm.$createElement：在 initRender 中赋值
// vm._renderProxy：在 init 中处理 vm._renderProxy = vm
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
/* istanbul ignore else */
// 如果执行 render 函数时出错了
// 开发环境渲染错误信息，生产环境返回之前的 vnode，以防止渲染错误导致组件空白
if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
try {
vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
} catch (e) {
handleError(e, vm, `renderError`)
vnode = vm._vnode
}
} else {
vnode = vm._vnode
}
} finally {
currentRenderingInstance = null
}
// 返回的 vnode 是一个数组，并且数组长度为1，那么直接拍平数组
if (Array.isArray(vnode) && vnode.length === 1) {
vnode = vnode[0]
}
// return empty vnode in case the render function errored out
if (!(vnode instanceof VNode)) {
if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
warn(
'Multiple root nodes returned from render function. Render function ' +
'should return a single root node.',
vm
)
}
vnode = createEmptyVNode()
}
// set parent
vnode.parent = _parentVnode
return vnode
}
}render通过createElement方法实现，模板编译成的render调用vm._c方法，手写的render方法调用vm.$createElement。
创建VNode，createElement对_createElement做封装，处理一些数据，真正创建_VNode的函数是_createElement。
js
/**
* 这个是真正创建 VNode 的函数
* context VNode 的上下文环境，也就是 vm 实例
* tag 标签
* data VNode 数据
* children VNode 的子节点
* normalizationType 用来区分 render 函数手写还是编译返回
*/
export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
if (isDef(data) && isDef((data: any).__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
)
// createEmptyVNode 是创建一个注释类型的节点
return createEmptyVNode()
}
// object syntax in v-bind
// 动态组件 v-bind:is 属性
if (isDef(data) && isDef(data.is)) {
tag = data.is
}
if (!tag) {
// in case of component :is set to falsy value
return createEmptyVNode()
}
// warn against non-primitive key
if (process.env.NODE_ENV !== 'production' &&
isDef(data) && isDef(data.key) && !isPrimitive(data.key)
) {
if (!__WEEX__ || !('@binding' in data.key)) {
warn(
'Avoid using non-primitive value as key, ' +
'use string/number value instead.',
context
)
}
}
// support single function children as default scoped slot
if (Array.isArray(children) &&
typeof children[0] === 'function'
) {
data = data || {}
data.scopedSlots = { default: children[0] }
children.length = 0
}
if (normalizationType === ALWAYS_NORMALIZE) {
// 如果是手写 render 函数
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
// render 函数通过编译返回
children = simpleNormalizeChildren(children)
}
let vnode, ns
if (typeof tag === 'string') {
// 如果 tag 是字符串类型
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// 如果是符合 html 规范的标签
// 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 <${tag}>.`,
context
)
}
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// 去 vm 的 components 上查找是否有这个标签的定义
// 查找到，说明是组件，调用 createComponent 创建组件
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 {
// 如果 tag 不是字符串类型，代表是组件
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
}normalizeChildren当children只有一个节点时，createTextVNode创建一个文本节点Node( [createTextVNode(children)])，编译slot，v-for会产生嵌套数组。
js
/**
*
* @param {*要规范的子节点} children
* @param {*嵌套的索引} nestedIndex
* @returns
*/
function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
const res = []
let i, c, lastIndex, last
for (i = 0; i < children.length; i++) {
c = children[i]
if (isUndef(c) || typeof c === 'boolean') continue
// 最近的节点
lastIndex = res.length - 1
last = res[lastIndex]
// nested
if (Array.isArray(c)) {
if (c.length > 0) {
// 递归调用
c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
// merge adjacent text nodes
if (isTextNode(c[0]) && isTextNode(last)) {
res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
c.shift()
}
res.push.apply(res, c)
}
} else if (isPrimitive(c)) {
if (isTextNode(last)) {
// merge adjacent text nodes
// this is necessary for SSR hydration because text nodes are
// essentially merged when rendered to HTML strings
// 合并连续text节点
res[lastIndex] = createTextVNode(last.text + c)
} else if (c !== '') {
// convert primitive to vnode
res.push(createTextVNode(c))
}
} else {
if (isTextNode(c) && isTextNode(last)) {
// 合并连续text节点
res[lastIndex] = createTextVNode(last.text + c.text)
} else {
// default key for nested array children (likely generated by v-for)
if (isTrue(children._isVList) &&
isDef(c.tag) &&
isUndef(c.key) &&
isDef(nestedIndex)) {
c.key = `__vlist${nestedIndex}_${i}__`
}
res.push(c)
}
}
}
// 返回一个类型为VNode的Array
return res
}_update方法 被调用的时机：首次渲染和数据更新时。
js
// 负责更新页面，首次渲染和更新数据都会调用 _update 去做页面更新
// 也是 patch 的入口位置
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
// 保存当前 vm 实例
const vm: Component = this
// 页面挂载的根节点
const prevEl = vm.$el
// 保存一份老的 VNode
const prevVnode = vm._vnode
const restoreActiveInstance = setActiveInstance(vm)
// 将新的 VNode 挂载到 vm._vnode 上
vm._vnode = vnode
// Vue.prototype.__patch__ is injected in entry points
// based on the rendering backend used.
if (!prevVnode) {
// 老 VNode 不存在，表示首次渲染，即初始化页面时走这里
// 使用 vm.__patch__ 进行 dom diff 并且生成真实 dom，最后挂载到 vm.$el 上
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// 老 VNode 存在，代表是更新操作，即页面更新走这里
vm.$el = vm.__patch__(prevVnode, vnode)
}
restoreActiveInstance()
// update __vue__ reference
if (prevEl) {
prevEl.__vue__ = null
}
if (vm.$el) {
vm.$el.__vue__ = vm
}
// if parent is an HOC, update its $el as well
if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
vm.$parent.$el = vm.$el
}
// updated hook is called by the scheduler to ensure that children are
// updated in a parent's updated hook.
}patch函数的实现
js
return function patch(oldVnode, vnode, hydrating, removeOnly) {
// 如果新节点不存在，但是老节点存在，调用 destroy，直接销毁老节点
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
let isInitialPatch = false
const insertedVnodeQueue = []
if (isUndef(oldVnode)) {
// 新节点存在，老节点不存在，那么是首次渲染，创建一个新节点
// empty mount (likely as component), create new root element
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
} else {
// 检查老节点是否是真实 DOM（真实 DOM 就是没有动态节点）
const isRealElement = isDef(oldVnode.nodeType)
// 1、判断节点是否可以复用，可以复用则对节点打补丁
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// 老节点不是真实 DOM 并且新旧 VNode 节点判定为同一节点时会进行 patchVnode 这个过程
// 同一节点代表可复用
// 这个过程主要就是进行 dom diff（也就是更新阶段，执行 patch 更新节点）
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
// 新老节点不是同一节点
// 2、节点不可复用，创建新的节点插入到旧节点之前，同时删除旧节点
// 老节点是真实 DOM
if (isRealElement) {
// mounting to a real element
// check if this is server-rendered content and if we can perform
// a successful hydration.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR)
hydrating = true
}
if (isTrue(hydrating)) {
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
invokeInsertHook(vnode, insertedVnodeQueue, true)
return oldVnode
} else if (process.env.NODE_ENV !== 'production') {
warn(
'The client-side rendered virtual DOM tree is not matching ' +
'server-rendered content. This is likely caused by incorrect ' +
'HTML markup, for example nesting block-level elements inside ' +
'<p>, or missing <tbody>. Bailing hydration and performing ' +
'full client-side render.'
)
}
}
// either not server-rendered, or hydration failed.
// create an empty node and replace it
// 老节点是真实 DOM，
// 如果不是服务端渲染或者合并到真实 DOM 失败，将老节点转换为 VNode
oldVnode = emptyNodeAt(oldVnode)
}
// 获取到老节点的真实元素
const oldElm = oldVnode.elm
// 找到父节点，对于初始化的节点来说，那就是 body
const parentElm = nodeOps.parentNode(oldElm)
// 基于新 VNode 创建整棵 DOM 树并插入到老 VNode 的父元素下
createElm(
vnode,
insertedVnodeQueue,
// extremely rare edge case: do not insert if old element is in a
// leaving transition. Only happens when combining transition +
// keep-alive + HOCs. (#4590)
oldElm._leaveCb ? null : parentElm,
nodeOps.nextSibling(oldElm)
)
// update parent placeholder node element, recursively
if (isDef(vnode.parent)) {
let ancestor = vnode.parent
const patchable = isPatchable(vnode)
while (ancestor) {
for (let i = 0; i < cbs.destroy.length; ++i) {
cbs.destroy[i](ancestor)
}
ancestor.elm = vnode.elm
if (patchable) {
for (let i = 0; i < cbs.create.length; ++i) {
cbs.create[i](emptyNode, ancestor)
}
// #6513
// invoke insert hooks that may have been merged by create hooks.
// e.g. for directives that uses the "inserted" hook.
const insert = ancestor.data.hook.insert
if (insert.merged) {
// start at index 1 to avoid re-invoking component mounted hook
for (let i = 1; i < insert.fns.length; i++) {
insert.fns[i]()
}
}
} else {
registerRef(ancestor)
}
ancestor = ancestor.parent
}
}
// 删除老节点
if (isDef(parentElm)) {
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
}
}
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
// 返回 VNode.elm，为真实 DOM 内容
return vnode.elm
}createPatchFunction用到了函数柯里化的思想，每个平台有各自的nodeOps（平台DOM的一些操作方法）和modules（平台的一些模块，在patch过程的不同阶段执行相应的钩子函数），createPatchFunction中提前固化了差异性参数，每次调用patch都传递了参数。
oldVnode可以不存在或者是一个DOM对象，vnode则是执行_render后返回的VNode节点。hydrating表示是否服务端渲染，removeOnly给transition-group使用。
createElm方法
js
// 根据 vnode 创建真实 DOM，并插入到父节点
function createElm(
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
if (isDef(vnode.elm) && isDef(ownerArray)) {
// This vnode was used in a previous render!
// now it's used as a new node, overwriting its elm would cause
// potential patch errors down the road when it's used as an insertion
// reference node. Instead, we clone the node on-demand before creating
// associated DOM element for it.
vnode = ownerArray[index] = cloneVNode(vnode)
}
vnode.isRootInsert = !nested // for transition enter check
// 如果 VNode 是组件，递归创建子组件真实节点，直到完成所有子组件的渲染才进行根节点的真实节点插入
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}
const data = vnode.data
const children = vnode.children
const tag = vnode.tag
if (isDef(tag)) {
if (process.env.NODE_ENV !== 'production') {
if (data && data.pre) {
creatingElmInVPre++
}
if (isUnknownElement(vnode, creatingElmInVPre)) {
warn(
'Unknown custom element: <' + tag + '> - did you ' +
'register the component correctly? For recursive components, ' +
'make sure to provide the "name" option.',
vnode.context
)
}
}
// 创建新节点
vnode.elm = vnode.ns ?
nodeOps.createElementNS(vnode.ns, tag) :
nodeOps.createElement(tag, vnode)
setScope(vnode)
/* istanbul ignore if */
if (__WEEX__) {
// in Weex, the default insertion order is parent-first.
// List items can be optimized to use children-first insertion
// with append="tree".
const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
if (!appendAsTree) {
// 针对指令的处理
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
createChildren(vnode, children, insertedVnodeQueue)
if (appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
} else {
// 递归调用 createChildren 去创建所有子节点
createChildren(vnode, children, insertedVnodeQueue)
// 执行 created 生命周期钩子
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
// 将节点插入父节点
insert(parentElm, vnode.elm, refElm)
}
if (process.env.NODE_ENV !== 'production' && data && data.pre) {
creatingElmInVPre--
}
} else if (isTrue(vnode.isComment)) {
// 注释节点，创建注释节点并插入父节点
vnode.elm = nodeOps.createComment(vnode.text)
insert(parentElm, vnode.elm, refElm)
} else {
// 文本节点，创建文本节点并插入父节点
vnode.elm = nodeOps.createTextNode(vnode.text)
insert(parentElm, vnode.elm, refElm)
}
}由于递归调用，整个vnode树节点的插入顺序是先子后父。
总结：
分析了Vue初始化大概工作，初始化挂载组件时，调用render方法生成虚拟Node,内部调用createElement方法实现，调用update更新DOM（初次渲染和更新时），内部调用patch方法实现。
编程技巧：
- 用函数实现Vue类可以把对Vue的扩展分散到多个模块去实现，而不是在一个模块中实现所有，更利于代码的维护和管理；
- 使用函数柯里化思想，createPatchFunction中提前固化了差异性参数，每次调用patch都传递了参数。