從模闆到虛拟Dom 再到 DOM樹

是什麼

1，虛拟dom：js直接操作dom的代價是相對昂貴的，每次操作dom都會讓浏覽器茶農頭開始執行一遍流程，

                       每次更新執行一次，假若我某一次操作導緻頁面有10個節點更新，js直接操作dom就是10次浏覽器計算，

                       而虛拟dom則會将10次更新對比舊代碼儲存在一個js對象（虛拟dom）中，然後一次性更新到Dom樹上，這樣就節省了大量無用的計算

                       而且，單個節點更新虛拟dom要比實際操作dom更新要快得多.

2，AST：vue模闆想要轉換成虛拟dom，就需要處理模闆上插值，指令，而AST便是為了描述vue模闆而生的，他可以通過對象來描述模闆結構有什麼，

                需要執行什麼，最後使用對應render函數生成新的虛拟dom，AST本身是不會變的，他隻會在模闆編譯階段出現，而後續的資料更新時不會變更AST，

                變更隻有AST上代表變量的值，然後經過render生成新的虛拟Dom

3，diff算法：所謂diff算法其實就是新虛拟dom與舊虛拟dom的對比算法

    1）同層級對比，若相同再開始深度對比

    2）深度對比優先，直到該分支的節全部對比完畢在移動位置對比其他分支

    3）對比方式

         a，此節點是否被移除 -> 添加新的節點

         b，節點一樣，屬性是否被改變 -> 舊屬性改為新屬性

         c，節點一樣，文本内容被改變-> 舊内容改為新内容

         d，節點要被整個替換 -> 結構完全不相同 移除整個替換

    4）優化政策

         注意：隻有在同一個虛拟節點才會精細比較，否則直接删除，比如,ul裡的10個li

         a，舊前與新前

         b，舊後與新後

         c，舊前與新後

         d，舊後與新前

​