「三劍客有四人，四大天王有五個。」——出處不可考

書接上回，我們完成了ref、reactive、watch及computed，也就是數據驅動視圖中數據驅動的部分。這是vue3源碼中最令我感到有趣、最喜歡、最為印象深刻的部分，在學習這些api的過程中，我們以Proxy為基礎，實現了數據驅動視圖、數據驅動watch回調、數據驅動computed，我們加深了對Proxy的理解，而且這些api都是只要完成，就能馬上在畫面上看到成果。

你可能會感到疑惑，「數據驅動」能馬上在畫面上看到成果，剩下的「視圖」反而不能？那是因為視圖並沒有那麼簡單。
我們可以在隨便一個網頁打開控制台，試試以下兩段代碼：

console.time()
for(let i=0;i<100000000;i++) {
    document.querySelector('body')
}
console.timeEnd()

console.time()
for(let i=0;i<100000000;i++) {
    1 + 1 === 2
}
console.timeEnd()

上面那段代碼的body可以換成任意標籤，下面的1 + 1 === 2可以換成簡單的表達式或計算。
運行後回傳的時間可能因設備的狀況受到影響，不過顯而易見，執行1億次運算或表達式花費的時間遠比讀取dom元素要來的少。讀取dom元素尚且如此費時，更新dom元素勢必會花費更多時間。

因此我們在更新視圖時，遍歷dom元素比對需要重新渲染的標籤並不是一個好的方法；將整個body的內容都換成新的也不是一個好的辦法。

我們應該先將dom元素的資訊json化並放進內存，也就是所謂的虛擬dom。當數據更新時，在內存比對更新前後的虛擬dom的區別，然後僅針對數據有改變的標籤去重新渲染，如此才能效能最優化。

所以可別小看視圖，為了驅動視圖，我們需要以下高達三個步驟：

1. 定義虛擬dom
2. 將虛擬dom渲染成真實dom
3. diff算法：數據更新時比對更新前後的虛擬dom，以實現最小量更新優化效能
4. ast抽象語法樹：將開發者在template寫的html轉化成虛擬dom

接下來剩下的20天，我們會盡量嘗試把驅動視圖所需的這三個步驟實現出來，而今天就先讓我水一回（？）