一、虛擬dom的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

dom具有批處理和高效率的Diff算法，最終表現(xiàn)在只是修改真實(shí)dom變更部分，可以保證高效的渲染，提高渲染性能

缺點(diǎn):

首次渲染大量dom時(shí)，會多一層虛擬dom計(jì)算，會比innerHTML計(jì)算慢一點(diǎn)

二、制作虛擬dom的流程

1.內(nèi)存中生成一棵虛擬dom樹

image.png

2.將內(nèi)存中的虛擬dom初始化其真實(shí)的dom

3.當(dāng)我們修改vue實(shí)例中的data數(shù)據(jù)時(shí)候

image.png

4.將之前的虛擬dom結(jié)合新的數(shù)據(jù)，生成一條新的虛擬dom樹

image.png

5.將此次生成好的虛擬dom樹與上一次虛擬dom進(jìn)行對比，通過diff算法進(jìn)行對比的

6.將對比出來的差異的部分進(jìn)行重新的真實(shí)dom的渲染

具體流程繪制圖

image.png

三、什么是diff算法

在Diff算法中，只平層的比較前后兩棵虛擬DOM樹的節(jié)點(diǎn)，沒有進(jìn)行深度的遍歷。
更深入請點(diǎn)擊以下鏈接
https://www.cnblogs.com/wind-lanyan/p/9061684.html