>[success] # 閱讀Snabbdom ~~~ 1.因為Vue 2.x 內部使用的 'Virtual DOM' 就是改造的 'Snabbdom',了解'Snabbdom'對虛擬dom 操作可以更方便理解vue這塊的實現理解 2.snabbdom 整個使用過程可以總結 2.1.使用'init' 創建生成'patch' 2.2.使用'h()'函數創建虛擬dom 2.3.使用'patch()' 比較新舊兩個 VNode 2.4.把變化的內容更新到真實 DOM 樹上 ~~~ [參考一個全程帶注釋鏈接](https://github.com/tramp-xu/codeAnalysis/blob/master/snabbdom-js/snabbdom.js) >[danger] ##### 結構目錄說明 ~~~ │ h.ts h()函數，用來創建 VNode │ hooks.ts 所有鉤子函數的定義 │ htmldomapi.ts 對 DOM API 的包裝 │ is.ts 判斷數組和原始值的函數 │ jsx-global.d.ts jsx 的類型聲明文件 │ jsx.ts 處理 jsx │ snabbdom.bundle.ts 入口，已經注冊了模塊 │ snabbdom.ts 初始化，返回 init/h/thunk │ thunk.ts 優化處理，對復雜視圖不可變值得優化 │ tovnode.ts DOM 轉換成 VNode │ vnode.ts 虛擬節點定義 │ ├─helpers │ attachto.ts 定義了 vnode.ts 中 AttachData 的數據結構 │ └─modules 所有模塊定義 / 鉤子函數 attributes.ts class.ts dataset.ts eventlisteners.ts hero.ts example 中使用到的自定義鉤子 module.ts 定義了模塊中用到的鉤子函數 props.ts style.ts ~~~