談談Vue/React中的虛擬DOM(vDOM)與Key值

一、DocumentFragment

在了解虛擬DOM前，先來了解DOM的一個對象屬性——DocumentFragment。

在一次操作中，需要頻繁操作DOM時，就可以先將要改變的節點附在DocumentFragment上，之后再將該對象渲染到DOM中，改方法只對DOM進行了一次操作，可以顯著提高性能。

但是該方法只適用於局部操作，而在真實的項目中，需要的不僅僅是DocumentFragment，於是就有了虛擬DOM的產生

緊接着，對於這么一個東西，我們先來基本的三連問。是什么？為什么？怎么用？

二、VDOM

什么是虛擬DOM?

虛擬DOM的本質是一個和真實DOM結構類似的JS對象

為什么要用虛擬DOM?

虛擬DOM可以提高瀏覽器的渲染速度。對比操作JS對象，操作真實的DOM消耗的性能較多，頻繁的操作DOM時，優勢彰顯的更為明顯。

虛擬DOM的實現步驟？

• 1、在頁面首次渲染時，將要渲染的數據全部加載到虛擬DOM中，而后在一次性渲染到真實DOM上

• 2、在數據變化時，額外的生成一顆虛擬DOM樹

• 3、通過Diff算法對比修改的部分，而后將修改部分渲染到真實的DOM中

• 4、釋放內存

真實DOM與虛擬DOM示意圖

真實DOM

虛擬DOM則類似與如下圖

三、Key值的用處

在一個Vue項目或者React項目中，寫循環時，往往會加上key值。那么這個key值到底有多大的用處呢？

• 首先，在Vue中，存在一個DOM復用機制，會盡量的回收DOM元素進行復用，而這個機制本身是高效的，但很多時候也會造成不可預知的Bug，而在加了key值后，元素就有了一個標識，復用機制不會復用帶key值的元素。而React也存在類似的機制。

• 反之，若使用相同的key值，可以使組件復用，也有可能導致渲染內容缺失。

• 因此，key值一般來說，最好是獨一無二的。

• 除此之外，虛擬DOM在使用Diff算法進行對比時，若存在key值，可以更高效更迅速。