VD 虛擬DOM

數據變化，先修改虛擬DOM層，然后通過虛擬DOM樹的對比檢查獲取出最小的修改量進行對真實DOM樹進行修改。虛擬DOM模式只是在DOM層的檢查，所以初始渲染速度非常快。在細小修改的大量數據修改都是速度也不錯的。因為只是在虛擬DOM層的計算對比，然后得出最小的修改操作對真實DOM進行修改。

臟檢查

臟檢查MVVM是檢查數據的變化，保留對真實節點的操作。臟檢查機制是對所有固定 watcher count
進行計算變化，所有在小修改變化中慢。但是在全部數據發生更新時候速度遠遠快于其他模式

依賴收集

數據收集每一個組件都存在自己的 viewModel 實例， 每個 viewModel
實例存在對數據監聽和真實DOM樹的操作、自己的數據作用域。當數據發生修改時候只會觸發自身作用域下的變動。所以在細小地方進行占的優勢大，但是初始渲染，和大部分數據更新時候就比較慢，因為創建大量的
viewModel 實例需要消耗的性能是一定的，所以現在大部分 MVVM
依賴收集模式框架需要的面對的問題就是如何復用之前創建的viewModel

如何進行MVVM模式的列表渲染進行優化？

在angular 和 vue 中我們可以用 :key=“index” （舊版本用使用 track-by=“index”）等方式提示框架這是一個可以復用的 viewModel 實例，框架就會知道當前viewModel 實例只是數組數據的內容發生改變，DOM結構并沒有發生改變。直接根據數據里的位置進行復用修改顯示數據。

性能比較

在比較性能的時候，要分清楚初始渲染、小量數據更新、大量數據更新這些不同的場合。Virtual DOM、臟檢查 MVVM、數據收集 MVVM 在不同場合各有不同的表現和不同的優化需求。Virtual DOM 為了提升小量數據更新時的性能，也需要針對性的優化，比如 shouldComponentUpdate 或是 immutable data。

• 初始渲染：Virtual DOM > 臟檢查 >= 依賴收集
• 小量數據更新：依賴收集 >> Virtual DOM + 優化 > 臟檢查（無法優化） > Virtual DOM 無優化
• 大量數據更新：臟檢查 + 優化 >= 依賴收集 + 優化 > Virtual DOM（無法/無需優化）>> MVVM 無優化

總結

以上是生活随笔為你收集整理的前端模式 VD， 脏检查 MVVM ,数据收集 MVVM 所使用的场合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。