渲染頁面
圖中框起來的部分，vue會根據回應式變化的通知生成一顆新的 Virtual Dom Tree，然后將新的Virtual Dom Tree 和之前的 Virtual Dom Tree 做 diff patch 實作，
Virtual Dom Tree
為什么要使用 VirtualDom?
通常，我們認為操作Dom 是很耗費性能的一件事情，我們可以考慮通過JS物件來模擬Dom物件，畢竟操作JS物件比操作Dom省時很多，但是在VirtualDom 中 也不能減少對Dom操作，而這一對Dom的操作都時在diff patch程序完成的，
這一步其實時節省了前端的作業量，減少了前端直接通過Dom API 完成 dom 節點 curd 的操作，從而提高了開發效率，并非時我們產品的性能，
在軟體開發中遇到的所有問題都可以通過增加一層抽象去解決，從架構角度去解釋，其實就是關注點分離的一種體現，而VirtualDom也是這樣的分層思想，
Diff && Patch
什么是diff
從以上可以看出diff 似乎是對一個字串的差異比較或者對比
病毒是有RNA組成的，而RNA是由四個堿基對組成的，diff 演算法也通常用于在計算機生物學領域去比較RNA之間的序列的區別，
假如通過 diff 演算法得出 兩個 RNA 病毒的 堿基序列是相似的，那我們就能得出他們都是來自同一族群，假如其中有一個RNA 他們已經可以得到
治療方案，或者已經有了特效藥，新產生的這個RNA 也就沒有過多的擔憂了，所以我們學好了diff演算法 ，是不是可以幫我嗯抵抗這個病毒，
下面我們學習 Vue中的 diff 策略
Diff 策略
Vue中 通過mvvm框架轉換為 Virtual Dom Tree, 當我們進行一些異步操作的時候, 當變化被通知回應后，會將左邊的dom tree 轉化為 右邊的dom tree,
轉化程序中會用到我們 diff的策略，
- 按tree的層級進行diff
在主流框架中一般都會按tree的層級進行diff，原因是在web ui 中很少會出現 dom 的層級結構會因為互動而產生更新，因此我們的virtual dom的策略就是在新舊節點之間按照層級進行diff 而得到差異，
- 按型別進行diff
不管virtual dom 中節點資料對應的是原生dom節點還是說vue 的組件，不同節點對應的指數，節點結構差異是很明顯的，因此對不同結構型別投入的diff成本與產出比差異是很大的，為了提升效率，virtual dom 只對相同型別的同一節點 diff，當新舊節點發生型別改變時，不進行指數的比較而直接創建新型別的virtual dom 替換舊節點
- 串列diff
在串列diff中，可以通過設定key 可以提升diff 的效率
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/399528.html
標籤：其他