用diff算法模擬了一個dom樹的數(shù)據(jù)結(jié)構(gòu)
vdom是樹狀結(jié)構(gòu)十绑，其節(jié)點為vnode协怒，vnode和瀏覽器DOM中的Node一一對應(yīng)奕删，通過vnode的elm屬性可以訪問到對應(yīng)的Node奕坟。
vdom因為是純粹的JS對象遍搞，所以操作它會很高效罗侯，但是vdom的變更最終會轉(zhuǎn)換成DOM操作，為了實現(xiàn)高效的DOM操作溪猿，一套高效的虛擬DOM diff算法顯得很有必要钩杰。
vdom很好的將dom做了一層映射關(guān)系，進(jìn)而將在我們本需要直接進(jìn)行dom的一系列操作再愈，映射到了操作vdom榜苫，而vdom上定義了關(guān)于真實dom的一些關(guān)鍵的信息，vdom完全是用js去實現(xiàn)翎冲，和宿主瀏覽器沒有任何聯(lián)系垂睬，此外得益于js的執(zhí)行速度，將原本需要在真實dom進(jìn)行的創(chuàng)建節(jié)點,刪除節(jié)點,添加節(jié)點等一系列復(fù)雜的dom操作全部放到vdom中進(jìn)行抗悍，這樣就通過操作vdom來提高直接操作的dom的效率和性能驹饺。
每一個vnode都映射到一個真實的dom節(jié)點上。其中幾個比較重要的屬性:
tag 屬性即這個vnode的標(biāo)簽屬性
data 屬性包含了最后渲染成真實dom節(jié)點后缴渊，節(jié)點上的class,attribute,style以及綁定的事件
children 屬性是vnode的子節(jié)點
text 屬性是文本屬性
elm 屬性為這個vnode對應(yīng)的真實dom節(jié)點
key 屬性是vnode的標(biāo)記赏壹，在diff過程中可以提高diff的效率，后文有講解
比如衔沼，我定義了一個vnode蝌借，它的數(shù)據(jù)結(jié)構(gòu)是:
{
tag: 'div'
data: {
id: 'app',
class: 'page-box'
},
children: [
{
tag: 'p',
text: 'this is demo'
}
]
}
最后渲染出的實際的dom結(jié)構(gòu)就是:
<div id="app" class="page-box">
<p>this is demo</p>
</div>
