P16

1.nextTick知道嗎、實(shí)現(xiàn)的原理是什么?是宏任務(wù)還是微任務(wù)?

微任務(wù)

原理:

nextTick方法主要是使用了宏任務(wù)和微任務(wù)，定義了一個異步方法，多次調(diào)用nextTick會將方法存入隊列中，通過這個異步方法清空隊列。

作用: nextTick用于下次Dom更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用nextTick用于下次Dom更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用nextTick用于下次Dom更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用nextTick,則可以在回調(diào)中獲取更新后的DOM。

2.虛擬dom為什么會提高性能?

虛擬DOM其實(shí)就是一個JavaScript對象。通過這個avaScript對象來描述真實(shí)DOM，真實(shí)DOM的操作，一般都會對某塊元素的整體重新渲染，采用虛擬DOM的話，當(dāng)數(shù)據(jù)變化的時候，只需要局部刷新變化的位置就好了，虛擬dom相當(dāng)于在js和真實(shí)dom中間加了一個緩存，利用dom diff算法避免了沒有必要的dom操作，從而提高性能

具體實(shí)現(xiàn)步驟如下

(1)用Javascript對象結(jié)構(gòu)表示DoM樹的結(jié)構(gòu);然后用這個樹構(gòu)建一個真正的DoM樹，插到文檔當(dāng)中

(2)當(dāng)狀態(tài)變更的時候，重新構(gòu)造一棵新的對象樹。然后用新的樹和舊的樹進(jìn)行比較，記錄兩棵樹差異

(3)把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DoM樹上，視圖就更新