虛擬DOM是什么?
虛擬dom顧名思義就是虛擬的dom對(duì)象眷蚓,它本身就是一個(gè) JavaScript 對(duì)象反番,只不過(guò)它是通過(guò)不同的屬性去描述一個(gè)視圖結(jié)構(gòu)。
為什么要使用虛擬DOM校读,有什么好處祖能?
將真實(shí)的元素節(jié)點(diǎn)抽象化,有效減少直接操作 dom 次數(shù)雁芙,從而提高程序性能
1.直接操作 dom 是有限制的兔甘,比如:clone 操作,如果需要進(jìn)行 clone 那么需要將其全部?jī)?nèi)容進(jìn)行復(fù)制洞焙,會(huì)去額外 clone 一些沒(méi)有必要的內(nèi)容澡匪,如果將這些操作轉(zhuǎn)移到 JavaScript 對(duì)象上褒链,那么就會(huì)變得簡(jiǎn)單了。
2.操作 dom 是代價(jià)比較大的操作甸鸟,頻繁的dom操作容易引起頁(yè)面的重繪和回流,但是通過(guò)虛擬dom進(jìn)行中間處理抢韭,可以有效減少直接操作dom的次數(shù),從而減少頁(yè)面重繪和回流。
3.具備跨平臺(tái)的優(yōu)勢(shì)–由于 Virtual DOM 是以 JavaScript 對(duì)象為基礎(chǔ)而不依賴真實(shí)平臺(tái)環(huán)境季惯,所以使它具有了跨平臺(tái)的能力,比如說(shuō)瀏覽器平臺(tái)贾漏、Node 等藕筋。
虛擬DOM怎么生成?
在vue中我們常常會(huì)為組件編寫(xiě)模板 - template伍掀, 這個(gè)模板會(huì)被編譯器 - compiler編譯為渲染函數(shù)暇藏,在接下來(lái)的掛載(mount)過(guò)程中會(huì)調(diào)用render函數(shù),返回的對(duì)象就是虛擬dom把兔。但它們還不是真正的dom瓮顽,所以會(huì)在后續(xù)的patch過(guò)程中進(jìn)一步轉(zhuǎn)化為dom。