后面写过一个snabbdom的解析，vue2.0版本用的就是这个，而后在他的根底上增加了一些性能
vue-clic生成我的项目中的render 中的 h 函数,就是createElement()
src/core/instance/render.js中创立h函数
Vue.init 的时候会调用initRender
初始化_render，
在 vm._render() 中调用了，用户传递的或者编译生成的 render 函数，这个时候传递了 createElement。
vm.c 和 vm.$createElement 外部都调用了 createElement，不同的是最初一个参数。vm.c 在编译生成的render 函数外部会调用，vm.$createElement 在用户传入的 render 函数外部调用。当用户传入render 函数的时候，要对用户传入的参数做解决
通过前一篇vm.$mount咱们晓得vue 外部通过这个挂载了元素,这个办法最初执行了mountComponent办法
这个办法定义了updateComponent,updateComponent中通过vm._render()（外面调用vm._c或者vm.$createElement）生成虚构dom,而后vm._update比照 两次的虚构dom进行更新.
创立渲染Watcher时会调用一次updateComponent来渲染dom.后续属性变动时 放入队列的渲染watcher,最初执行run()的时候,会调用updateComponent来进行比照更新，能够联合我上一篇一起看.
而后该看vm._c和vm.$createElement也就是h函数 外部调用createElement生成vNode并返回。
createElement 相似snabbdom的h函数
咱们关注重点不同局部
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 ) return createEmptyVNode() } // <component v-bind:is="currentTabComponent"></component> // object syntax in v-bind 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的类型，如果是原始值的话转换成VNode的数组 //如果是数组的话，持续解决数组中的元素 //如果数组中的子元素又是数组(slottemplate)，递归解决 //如果间断两个节点都是字符串会合并文本节点 children = normalizeChildren(children) } else if (normalizationType === SIMPLE_NORMALIZE) { // 把二维数组，转换成一维数组 //如果children中有函数组件的话，函数组件会返回数组模式 //这时候children就是一个二维数组，只须要把二维数组转换为一维数组 children = simpleNormalizeChildren(children) } let vnode, ns //判断tag是字符串还是组件 if (typeof tag === 'string') { let Ctor ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag) // 是否是 html 的保留标签 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 <${tag}>.`, context ) } ////如果是浏览器的保留标签，创立对应的VNode vnode = new VNode( config.parsePlatformTagName(tag), data, children, undefined, undefined, context ) // 判断是否是 自定义组件 } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) { // 查找自定义组件构造函数的申明 // 依据 Ctor 创立组件的 VNode // 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 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() }}这里虚构dom 和snabbdom不太一样，vue中的vNode属性更多,咱们目前只关注咱们要的就能够了（关注和snabbdom一样）。
update办法外部调用 vm.__patch__() 把虚构 DOM 转换成实在 DOM
vue构造函数定义时混入时创立_update
这样咱们就晓得了updateComponent中 _update(_render())，render生成虚构dom,update比照更新，是怎么更新的.
patch 函数初始化
性能：比照两个 VNode 的差别，把差别更新到实在 DOM。如果是首次渲染的话，会把实在 DOM 先转换成VNode
src/platforms/web/runtime/index.js初始化 patch
import {patch} from' ./patch'Vue.prototype.__patch__=inBrowser?patch:noopsrc/platforms/web/runtime/patch.js
src/core/vdom/patch.js
export function createPatchFunction (backend) { let i, j const cbs = {} // modules 节点的属性/事件/款式的操作 // nodeOps 节点操作 const { modules, nodeOps } = backend for (i = 0; i < hooks.length; ++i) { // cbs['update'] = [] cbs[hooks[i]] = [] for (j = 0; j < modules.length; ++j) { if (isDef(modules[j][hooks[i]])) { // cbs['update'] = [updateAttrs, updateClass, update...] cbs[hooks[i]].push(modules[j][hooks[i]]) } } } //........省略 return function patch (oldVnode, vnode, hydrating, removeOnly) { // 新的 VNode 不存在 if (isUndef(vnode)) { // 老的 VNode 存在，执行 Destroy 钩子函数 if (isDef(oldVnode)) invokeDestroyHook(oldVnode) return } let isInitialPatch = false const insertedVnodeQueue = [] // 老的 VNode 不存在 if (isUndef(oldVnode)) { // empty mount (likely as component), create new root element isInitialPatch = true // 创立新的 VNode createElm(vnode, insertedVnodeQueue) } else { // 新的和老的 VNode 都存在，更新 const isRealElement = isDef(oldVnode.nodeType) // 判断参数1是否是实在 DOM，不是实在 DOM if (!isRealElement && sameVnode(oldVnode, vnode)) { // 更新操作，diff 算法 // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly) } else { // 第一个参数是实在 DOM，创立 VNode // 初始化 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 oldVnode = emptyNodeAt(oldVnode) } // replacing existing element const oldElm = oldVnode.elm const parentElm = nodeOps.parentNode(oldElm) // create new node // 创立 DOM 节点 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 } } // destroy old node if (isDef(parentElm)) { removeVnodes([oldVnode], 0, 0) } else if (isDef(oldVnode.tag)) { invokeDestroyHook(oldVnode) } } } invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm }}createElm把 VNode 转换成实在 DOM，插入到 DOM 树上这个和snabbdom的相似就不再这里开展了,有趣味能够下源码读下这里
patchVnode这里：
function patchVnode ( oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly ) { if (oldVnode === vnode) { return } if (isDef(vnode.elm) && isDef(ownerArray)) { // clone reused vnode vnode = ownerArray[index] = cloneVNode(vnode) } const elm = vnode.elm = oldVnode.elm if (isTrue(oldVnode.isAsyncPlaceholder)) { if (isDef(vnode.asyncFactory.resolved)) { hydrate(oldVnode.elm, vnode, insertedVnodeQueue) } else { vnode.isAsyncPlaceholder = true } return } // reuse element for static trees. // note we only do this if the vnode is cloned - // if the new node is not cloned it means the render functions have been // reset by the hot-reload-api and we need to do a proper re-render. // 如果新旧 VNode 都是动态的，那么只须要替换componentInstance if (isTrue(vnode.isStatic) && isTrue(oldVnode.isStatic) && vnode.key === oldVnode.key && (isTrue(vnode.isCloned) || isTrue(vnode.isOnce)) ) { vnode.componentInstance = oldVnode.componentInstance return } let i const data = vnode.data if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) { i(oldVnode, vnode) } const oldCh = oldVnode.children const ch = vnode.children if (isDef(data) && isPatchable(vnode)) { // 调用 cbs 中的钩子函数，操作节点的属性/款式/事件.... for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode) // 用户的自定义钩子 if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode) } // 新节点没有文本 if (isUndef(vnode.text)) { // 老节点和老节点都有有子节点 // 对子节点进行 diff 操作，调用 updateChildren if (isDef(oldCh) && isDef(ch)) { if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly) } else if (isDef(ch)) { // 新的有子节点，老的没有子节点 if (process.env.NODE_ENV !== 'production') { checkDuplicateKeys(ch) } // 先清空老节点 DOM 的文本内容，而后为以后 DOM 节点退出子节点 if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '') addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) } else if (isDef(oldCh)) { // 老节点有子节点，新的没有子节点 // 删除老节点中的子节点 removeVnodes(oldCh, 0, oldCh.length - 1) } else if (isDef(oldVnode.text)) { // 老节点有文本，新节点没有文本 // 清空老节点的文本内容 nodeOps.setTextContent(elm, '') } } else if (oldVnode.text !== vnode.text) { // 新老节点都有文本节点 // 批改文本 nodeOps.setTextContent(elm, vnode.text) } if (isDef(data)) { if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode) } }updateChildren
updateChildren 和 Snabbdom 中的 updateChildren 整体算法统一，这里就不再开展了。咱们再来看下它处理过程中 key 的作用，再 patch 函数中，调用 patchVnode 之前，会首先调用 sameVnode()判断以后的新老 VNode 是否是雷同节点，sameVnode() 中会首先判断 key 是否雷同。
当没有设置 key 的时候
- 在 updateChildren 中比拟子节点的时候，会做三次更新 DOM 操作和一次插入 DOM 的操作
当设置 key 的时候
- 在 updateChildren 中比拟子节点的时候，因为 oldVnode 的子节点的 b,c,d 和 newVnode 的 x,b,c 的key 雷同，所以只做比拟，没有更新 DOM 的操作，当遍历结束后，会再把 x 插入到 DOM 上DOM 操作只有一次插入操作。
这是虚构dom的更新，和snabbdom很像，就是增加了h函数中对组件局部的相干解决，依据组件编译进去的ast语法树,生成组件的vNode下篇咱们再来理解一下vue模板的编译理解下组件相干.