DOM DIFF 原理解析
背景：
現(xiàn)在面試極其熱門的一個(gè)問題碌廓， 希望通過這個(gè)分享， 能讓大家對(duì)DOM DIFF原理有一個(gè)更深入的了解
目標(biāo)：
1. 了解我們?nèi)粘Ｊ褂胿node的渲染原理
2. 了解dom diff的原理唧瘾， 能詳細(xì)的描述其過程
3. 結(jié)合我們的業(yè)務(wù)應(yīng)用（json diff）
4. 了解vue nextTick的原理祸泪， 能簡(jiǎn)單的描述其原理
5. vue dom diff 和 react dom diff 的區(qū)別
dom diff簡(jiǎn)介
顧名思義尸昧， 就是虛擬道木比對(duì)(virtual dom diff), 這里簡(jiǎn)單介紹一下virtual dom的實(shí)現(xiàn)原理岸裙。
常見的virtual dom庫(kù)**snabbdom**, vue的虛擬dom起始就是基于snabbdom來實(shí)現(xiàn)的猖败， 不過是在其基礎(chǔ)上做了一系列的優(yōu)化， 稍后我們會(huì)介紹
https://github.com/snabbdom/snabbdom
下面以snabbdom為例簡(jiǎn)單介紹一下虛擬dom的渲染原理降允；
它的核心是由三個(gè)核心方法構(gòu)成的：
-? render： 將虛擬dom 渲染成真實(shí)dom
-? h：把傳入的參數(shù)變?yōu)樘摂Mdom恩闻。 虛擬dom入口方法， 用戶可以調(diào)用這個(gè)方法拟糕，
-? patch：比對(duì)和更新
下面我們來簡(jiǎn)單分析一下domdiff的渲染流程
實(shí)現(xiàn) h 函數(shù)
h函數(shù)接受四個(gè)參數(shù)判呕， 第一個(gè)參數(shù)是tag， 第二個(gè)參數(shù)是props送滞， 第三個(gè)參數(shù)是文字/子節(jié)點(diǎn)
起始我們就是需要把傳入的參數(shù)給格式化侠草， 轉(zhuǎn)化成虛擬dom的形式
? 這里可以簡(jiǎn)單測(cè)試一下
### render函數(shù)
render函數(shù)的作用是把h函數(shù)轉(zhuǎn)化成的vnode， 第一層開始犁嗅， 一次遞歸把vnode轉(zhuǎn)化成真實(shí)dom
看一下代碼
核心patch函數(shù)
patch函數(shù)的作用就是比較新舊虛擬dom的差異边涕， 做到最小量的更新。 也就是我們所說的dom diff
簡(jiǎn)單看一下流程圖
