虛擬DOM與diff演算法

虛擬dom( vdom ) 和 diff演算法

總結：虛擬dom 是什麼？

虛擬dom是利用 了js的物件的object的物件模型來模擬真實dom, 那麼它的結構是乙個樹形結構

虛擬dom的優缺點？

2. diff演算法

diff演算法是用來比較兩個或是多個檔案， 返回值是檔案的不同點

diff演算法是同級比較的

diff思維也是來自後端

diff演算法的比較思維

比較後會出現四種情況：

1、此節點是否被移除 -> 新增新的節點

2、屬性是否被改變 -> 舊屬性改為新屬性

3、文字內容被改變-> 舊內容改為新內容

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

整個vdom的使用流程（vue）

元件vue中如何定義， 使用， 操作元件

元件vue.extend() ===> 元件中也可以書寫 vue這個構造器函式中 options

vue.component() 為什麼要執行這個方法呢？

元件的註冊有兩種方式

全域性註冊

簡寫: vue.component(元件的名稱，options )

區域性註冊

new vue(

}) 元件命名建議使用兩種方式

使用 kebab-case

舉例vue.component(『header-title』,{})

使用 pascalcase

舉例：vue.component(『mycomponentname』, )

解釋： 為什麼要是上面兩種寫法 ? 為了區別html的原生標籤

元件的巢狀

template

元件根元素唯一

data選項

虛擬DOM與diff演算法

虛擬dom 只要實現按需更新頁面上的元素即可,只需要把修改的資料,所對應的dom元素重新構建一下,其它沒有變化的資料,所對應的dom節點不需要被強制更新 只需拿到頁面被更新前的記憶體中的dom樹,同時,再拿到頁面更新前,新渲染出來的記憶體dom樹,然後,對比這兩棵新舊dom樹,只需要找到那些需要被重...

虛擬DOM和Diff演算法

虛擬dom其實就是在真實dom之前加了一層js物件生成的dom 用js物件模擬dom 把這個虛擬dom物件轉為真實的dom插入到頁面中 如果有事件修改了虛擬dom，比較兩個虛擬dom樹的差異，得到差異物件 補丁 把差異物件應用到正則的dom樹上 比較同級的節點 同一父節點的子節點 當發現節點已經不存...

虛擬DOM和diff演算法

虛擬dom virtual dom 也就是我們常說的虛擬節點，它是通過js的object物件模擬dom中的節點，然後再通過特定的render方法將其渲染成真實的dom的節點。為什麼要使用虛擬dom呢，因為操作真實dom的耗費的效能代價太高，頻繁的操作dom，會大量的造成頁面的重繪和回流，出於效能優化...