export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array<VNode>; text: string | void; elm: Node | void; ns: string | void; context: Component | void; // rendered in this component's scope key: string | number | void; componentOptions: VNodeComponentOptions | void; componentInstance: Component | void; // component instance parent: VNode | void; // component placeholder node // strictly internal raw: boolean; // contains raw HTML? (server only) isStatic: boolean; // hoisted static node isRootInsert: boolean; // necessary for enter transition check isComment: boolean; // empty comment placeholder? isCloned: boolean; // is a cloned node? isOnce: boolean; // is a v-once node? asyncFactory: Function | void; // async component factory function asyncMeta: Object | void; isAsyncPlaceholder: boolean; ssrContext: Object | void; functionalContext: Component | void; // real context vm for functional nodes functionalOptions: ?ComponentOptions; // for SSR caching functionalScopeId: ?string; // functioanl scope id support

export function createElement ( context: Component, tag: any, data: any, children: any, normalizationType: any, alwaysNormalize: boolean): VNode { // 兼容不傳data的情況 if (Array.isArray(data) || isPrimitive(data)) { normalizationType = children children = data data = undefined } // 如果alwaysNormalize是true // 那么normalizationType應(yīng)該設(shè)置為常量ALWAYS_NORMALIZE的值 if (isTrue(alwaysNormalize)) { normalizationType = ALWAYS_NORMALIZE } // 調(diào)用_createElement創(chuàng)建虛擬節(jié)點(diǎn) return _createElement(context, tag, data, children, normalizationType)}export function _createElement ( context: Component, tag?: string | Class<Component> | Function | Object, data?: VNodeData, children?: any, normalizationType?: number): VNode { /** * 如果存在data.__ob__，說明data是被Observer觀察的數(shù)據(jù) * 不能用作虛擬節(jié)點(diǎn)的data * 需要拋出警告，并返回一個(gè)空節(jié)點(diǎn) * * 被監(jiān)控的data不能被用作vnode渲染的數(shù)據(jù)的原因是： * data在vnode渲染過程中可能會(huì)被改變，這樣會(huì)觸發(fā)監(jiān)控，導(dǎo)致不符合預(yù)期的操作 */ 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() } // object syntax in v-bind if (isDef(data) && isDef(data.is)) { tag = data.is } if (!tag) { // 當(dāng)組件的is屬性被設(shè)置為一個(gè)falsy的值 // Vue將不會(huì)知道要把這個(gè)組件渲染成什么 // 所以渲染一個(gè)空節(jié)點(diǎn) // in case of component :is set to falsy value return createEmptyVNode() } // key為非原始值警告 // warn against non-primitive key if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.key) && !isPrimitive(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 } // 根據(jù)normalizationType的值，選擇不同的處理方法 if (normalizationType === ALWAYS_NORMALIZE) { children = normalizeChildren(children) } else if (normalizationType === SIMPLE_NORMALIZE) { children = simpleNormalizeChildren(children) } let vnode, ns // 如果標(biāo)簽名是字符串類型 if (typeof tag === 'string') { let Ctor // 獲取標(biāo)簽的命名空間 ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag) // 如果是保留標(biāo)簽 if (config.isReservedTag(tag)) {  // platform built-in elements  // 就創(chuàng)建這樣一個(gè)vnode  vnode = new VNode(  config.parsePlatformTagName(tag), data, children,  undefined, undefined, context  )  // 如果不是保留字標(biāo)簽，嘗試從vm的components上查找是否有這個(gè)標(biāo)簽的定義 } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {  // component  // 如果找到，就創(chuàng)建虛擬組件節(jié)點(diǎn)  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  // 兜底方案，創(chuàng)建一個(gè)正常的vnode  vnode = new VNode(  tag, data, children,  undefined, undefined, context  ) } } else { // 當(dāng)tag不是字符串的時(shí)候，我們認(rèn)為tag是組件的構(gòu)造類 // 所以直接創(chuàng)建 // direct component options / constructor vnode = createComponent(tag, data, context, children) } if (isDef(vnode)) { // 應(yīng)用命名空間 if (ns) applyNS(vnode, ns) return vnode } else { // 返回一個(gè)空節(jié)點(diǎn) return createEmptyVNode() }}function applyNS (vnode, ns, force) { vnode.ns = ns if (vnode.tag === 'foreignObject') { // use default namespace inside foreignObject ns = undefined force = true } if (isDef(vnode.children)) { for (let i = 0, l = vnode.children.length; i < l; i++) {  const child = vnode.children[i]  if (isDef(child.tag) && (isUndef(child.ns) || isTrue(force))) {  applyNS(child, ns, force)  } } }}

 function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) { // 如果新舊節(jié)點(diǎn)一致，什么都不做 if (oldVnode === vnode) {  return } // 讓vnode.el引用到現(xiàn)在的真實(shí)dom，當(dāng)el修改時(shí)，vnode.el會(huì)同步變化 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. // 如果新舊都是靜態(tài)節(jié)點(diǎn)，并且具有相同的key // 當(dāng)vnode是克隆節(jié)點(diǎn)或是v-once指令控制的節(jié)點(diǎn)時(shí)，只需要把oldVnode.elm和oldVnode.child都復(fù)制到vnode上 // 也不用再有其他操作 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)) {  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) } // 如果vnode不是文本節(jié)點(diǎn)或者注釋節(jié)點(diǎn) if (isUndef(vnode.text)) {  // 并且都有子節(jié)點(diǎn)  if (isDef(oldCh) && isDef(ch)) {  // 并且子節(jié)點(diǎn)不完全一致，則調(diào)用updateChildren  if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)  // 如果只有新的vnode有子節(jié)點(diǎn)  } else if (isDef(ch)) {  if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')  // elm已經(jīng)引用了老的dom節(jié)點(diǎn)，在老的dom節(jié)點(diǎn)上添加子節(jié)點(diǎn)  addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)  // 如果新vnode沒有子節(jié)點(diǎn)，而vnode有子節(jié)點(diǎn)，直接刪除老的oldCh  } else if (isDef(oldCh)) {  removeVnodes(elm, oldCh, 0, oldCh.length - 1)  // 如果老節(jié)點(diǎn)是文本節(jié)點(diǎn)  } else if (isDef(oldVnode.text)) {  nodeOps.setTextContent(elm, '')  }  // 如果新vnode和老vnode是文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)  // 但是vnode.text != oldVnode.text時(shí)，只需要更新vnode.elm的文本內(nèi)容就可以 } 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) } }

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { let oldStartIdx = 0 // 舊頭索引 let newStartIdx = 0 // 新頭索引 let oldEndIdx = oldCh.length - 1 // 舊尾索引 let newEndIdx = newCh.length - 1 // 新尾索引 let oldStartVnode = oldCh[0] // oldVnode的第一個(gè)child let oldEndVnode = oldCh[oldEndIdx] // oldVnode的最后一個(gè)child let newStartVnode = newCh[0] // newVnode的第一個(gè)child let newEndVnode = newCh[newEndIdx] // newVnode的最后一個(gè)child let oldKeyToIdx, idxInOld, vnodeToMove, refElm // removeOnly is a special flag used only by <transition-group> // to ensure removed elements stay in correct relative positions // during leaving transitions const canMove = !removeOnly // 如果oldStartVnode和oldEndVnode重合，并且新的也都重合了，證明diff完了，循環(huán)結(jié)束 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {  // 如果oldVnode的第一個(gè)child不存在  if (isUndef(oldStartVnode)) {  // oldStart索引右移  oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left  // 如果oldVnode的最后一個(gè)child不存在  } else if (isUndef(oldEndVnode)) {  // oldEnd索引左移  oldEndVnode = oldCh[--oldEndIdx]  // oldStartVnode和newStartVnode是同一個(gè)節(jié)點(diǎn)  } else if (sameVnode(oldStartVnode, newStartVnode)) {  // patch oldStartVnode和newStartVnode， 索引左移，繼續(xù)循環(huán)  patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)  oldStartVnode = oldCh[++oldStartIdx]  newStartVnode = newCh[++newStartIdx]  // oldEndVnode和newEndVnode是同一個(gè)節(jié)點(diǎn)  } else if (sameVnode(oldEndVnode, newEndVnode)) {  // patch oldEndVnode和newEndVnode，索引右移，繼續(xù)循環(huán)  patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)  oldEndVnode = oldCh[--oldEndIdx]  newEndVnode = newCh[--newEndIdx]  // oldStartVnode和newEndVnode是同一個(gè)節(jié)點(diǎn)  } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right  // patch oldStartVnode和newEndVnode  patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)  // 如果removeOnly是false，則將oldStartVnode.eml移動(dòng)到oldEndVnode.elm之后  canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))  // oldStart索引右移，newEnd索引左移  oldStartVnode = oldCh[++oldStartIdx]  newEndVnode = newCh[--newEndIdx]  // 如果oldEndVnode和newStartVnode是同一個(gè)節(jié)點(diǎn)  } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left  // patch oldEndVnode和newStartVnode  patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)  // 如果removeOnly是false，則將oldEndVnode.elm移動(dòng)到oldStartVnode.elm之前  canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)  // oldEnd索引左移，newStart索引右移  oldEndVnode = oldCh[--oldEndIdx]  newStartVnode = newCh[++newStartIdx]  // 如果都不匹配  } else {  if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)  // 嘗試在oldChildren中尋找和newStartVnode的具有相同的key的Vnode  idxInOld = isDef(newStartVnode.key)   ? oldKeyToIdx[newStartVnode.key]   : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)  // 如果未找到，說明newStartVnode是一個(gè)新的節(jié)點(diǎn)  if (isUndef(idxInOld)) { // New element   // 創(chuàng)建一個(gè)新Vnode   createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)  // 如果找到了和newStartVnodej具有相同的key的Vnode，叫vnodeToMove  } else {   vnodeToMove = oldCh[idxInOld]   /* istanbul ignore if */   if (process.env.NODE_ENV !== 'production' && !vnodeToMove) {   warn(    'It seems there are duplicate keys that is causing an update error. ' +    'Make sure each v-for item has a unique key.'   )   }   // 比較兩個(gè)具有相同的key的新節(jié)點(diǎn)是否是同一個(gè)節(jié)點(diǎn)   //不設(shè)key，newCh和oldCh只會(huì)進(jìn)行頭尾兩端的相互比較，設(shè)key后，除了頭尾兩端的比較外，還會(huì)從用key生成的對(duì)象oldKeyToIdx中查找匹配的節(jié)點(diǎn)，所以為節(jié)點(diǎn)設(shè)置key可以更高效的利用dom。   if (sameVnode(vnodeToMove, newStartVnode)) {   // patch vnodeToMove和newStartVnode   patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)   // 清除   oldCh[idxInOld] = undefined   // 如果removeOnly是false，則將找到的和newStartVnodej具有相同的key的Vnode，叫vnodeToMove.elm   // 移動(dòng)到oldStartVnode.elm之前   canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)   // 如果key相同，但是節(jié)點(diǎn)不相同，則創(chuàng)建一個(gè)新的節(jié)點(diǎn)   } else {   // same key but different element. treat as new element   createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)   }  }  // 右移  newStartVnode = newCh[++newStartIdx]  } }