源碼：https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js

虛擬dom

diff算法首先要明確一個概念就是diff的對象是虛擬dom，更新真實dom則是diff算法的結果

Vnode基類

 constructor (  。。。 ) {  this.tag = tag  this.data = data  this.children = children  this.text = text  this.elm = elm  this.ns = undefined  this.context = context  this.fnContext = undefined  this.fnOptions = undefined  this.fnScopeId = undefined  this.key = data && data.key  this.componentOptions = componentOptions  this.componentInstance = undefined  this.parent = undefined  this.raw = false  this.isStatic = false  this.isRootInsert = true  this.isComment = false  this.isCloned = false  this.isOnce = false  this.asyncFactory = asyncFactory  this.asyncMeta = undefined  this.isAsyncPlaceholder = false }

這個部分的代碼 主要是為了更好地知道在diff算法中具體diff的屬性的含義，當然也可以更好地了解vnode實例

整體過程

核心函數是patch函數

function sameVnode (a, b) { return (  a.key === b.key && (   (    a.tag === b.tag &&    a.isComment === b.isComment &&    isDef(a.data) === isDef(b.data) &&    sameInputType(a, b)   ) || (    isTrue(a.isAsyncPlaceholder) &&    a.asyncFactory === b.asyncFactory &&    isUndef(b.asyncFactory.error)   )  ) )}

這里是一個外層的比較函數，直接去比較了兩個節點的key，tag（標簽）,data的比較（注意這里的data指的是VNodeData），input的話直接比較type。

export interface VNodeData { key?: string | number; slot?: string; scopedSlots?: { [key: string]: ScopedSlot }; ref?: string; tag?: string; staticClass?: string; class?: any; staticStyle?: { [key: string]: any }; style?: object[] | object; props?: { [key: string]: any }; attrs?: { [key: string]: any }; domProps?: { [key: string]: any }; hook?: { [key: string]: Function }; on?: { [key: string]: Function | Function[] }; nativeOn?: { [key: string]: Function | Function[] }; transition?: object; show?: boolean; inlineTemplate?: {  render: Function;  staticRenderFns: Function[]; }; directives?: VNodeDirective[]; keepAlive?: boolean;}

這會確認兩個節點是否有進一步比較的價值，不然直接替換

替換的過程主要是一個createElm函數 另外則是銷毀oldVNode

// destroy old node    if (isDef(parentElm)) {     removeVnodes(parentElm, [oldVnode], 0, 0)    } else if (isDef(oldVnode.tag)) {     invokeDestroyHook(oldVnode)    }