虛擬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,會大量的造成頁面的重繪和回流,出於效能優化...