vue diff算法分析

diff存在的意義

1.對服務端和瀏覽器端統(tǒng)一一層虛擬dom，這樣無論是服務器預編譯runTime還是
在瀏覽器運行都會形成統(tǒng)一，各部分之間相互隔離。例如

const vnode={
    tagName:'div',
    attrs:{
         'data-name':'test'
     },
     context:'${Vue}',
     data:'a.b',
}

2.性能優(yōu)化。性能優(yōu)化的來源渲染和預編譯的ast 語法轉換。在服務器dev環(huán)境時，通過編譯模板形成模板渲染函數(shù),渲染時只需要調用對應的渲染函數(shù),減少渲染,同時形成函數(shù)緩存,不用每次計算。

<div>{{a*b+2*c}}</div>
const render = (a,b,v) =>{
                 return a*b+2*c;
           }

vue diff算法核心 比較是old 和新的 虛擬dom 對象層次遞歸比較的，

1.相識性

const sameVnode=>(a, b) {
        return (
            // key來源于v-for或者自定的:key屬性
            a.key === b.key &&
            a.tag === b.tag &&
            a.isComment === b.isComment &&
            isDef(a.data) === isDef(b.data) &&
            sameInputType(a, b)
        )
    }

相似就不更新，不相似就update

2.比較過程

1. old 序列為 ABCD 新序列為 ABD

          直接刪除C節(jié)點

2. old 序列為 BACD 新序列為 ABD

           vue保留B react干掉B