中國人中庸之道，中國人造的框架呢？
大家好，我是卡頌。
都說中國人講究中庸之道，中國人造的框架講究么?
本文會從原理層面講解Vue是如何在運行時與編譯時之間保持中庸的平衡。
UI = fn(state)
幾乎所有前端框架工作原理都能用如下公式概括：
- UI = fn(state)
UI(視圖)可以通過state(狀態)經過fn(框架)計算得出。
然而具體原理上，框架之間卻千差萬別。
可以按照「更新粒度」將他們分為三類：
- 樹級更新
- 組件級更新
- 節點級更新
更新粒度沒有優劣之分，只是對應不同的實現
接下來我們簡單了解下不同粒度更新方式的實現原理。
假設有如下組件樹，其中Cpn是一個自定義組件，內部結構為ul>li*2：
我們希望將Cpn內的一個li更新為黃色：
樹級更新
「樹級更新」的框架會再生成一棵完整「虛擬DOM樹」，生成過程中與之前的「虛擬DOM樹」對應節點進行比較：
找到變化的節點后，執行對應DOM操作。
「樹級更新」框架的特點是：
- 依賴「虛擬DOM」
- 不關心觸發更新的節點(因為會通過「虛擬DOM」的全樹對比找到他)
采用這種更新方式最有名的框架就是React。
組件級更新
上面的例子，如果是「組件級更新」框架。
會找到觸發更新節點所在組件，生成該組件的「虛擬DOM樹」(而不是全樹的「虛擬DOM樹」)，生成過程中與該組件之前的「虛擬DOM樹」對應節點進行比較：
找到變化的節點后，執行對應DOM操作。
「組件級更新」框架的特點是：
- 依賴「虛擬DOM」
- 關心觸發更新的節點(「虛擬DOM」的對比會作用于該節點所在組件)
采用這種更新方式最有名的框架就是Vue。
節點級更新
如果是「節點級更新」框架，在編譯時會根據「狀態變化對應的DOM變化」直接生成對應方法，當狀態改變后直接調用對應方法。
上面的例子，在編譯時會關聯color狀態與changeColor方法：
- function changeColor(newColor) {
- li.style.color = newColor;
- }
當改變color狀態后直接調用changeColor方法更新li對應DOM。
「節點級更新」框架的特點是：
- 不依賴「虛擬DOM」，依賴預編譯(建立狀態與改變DOM的方法之間的聯系)
- 關心觸發更新的節點(節點狀態與更新方法一一對應)
采用這種更新方式最有名的框架就是Svelte。
中庸的Vue3
Vue作為「組件級更新」代表，更新粒度介于「樹級」與「節點級」之間。那到底是中間偏左呢，還是中間偏右呢?
Vue3說：
我要反復橫跳，兩邊我都要
Vue3中包含三種樹狀結構：
- 描述視圖的樹 -> 虛擬DOM樹 -> 真實DOM樹
其中「描述視圖的樹」官方推薦使用「模版語法」，但也能使用JSX。
不管是哪種方式，最終都會轉化為「虛擬DOM樹」。
當使用JSX時，Vue3擁有了React運行時的靈活性，此時的Vue3可以看作是「加強版React + Mobx」
當使用「模版語法」，Vue3引入了「預編譯」技術。此時可以將Vue3的工作流程細化為四步：
- 描述視圖的樹 -> VNode樹 -> Block數組 -> 真實DOM樹
其中VNode樹就是常規意義的「虛擬DOM樹」，Block數組則為「VNode樹」中對狀態有依賴，會變化的那部分VNode組成的數組。
比如，對于如下模版語法：
- <template>
- <section>
- <div>i am</div>
- <p>{{name}}</p>
- </section>
- </template>
section與div不包含狀態，不會變化，所以會轉化為VNode，但是沒有對應Block。
p包含狀態name，會轉化為VNode與Block。
當該template所在組件觸發name狀態變化，之前需要依次創建section、div、p的VNode并進行比較。
有了預編譯技術后只需要遍歷Block數組進行比較。
用上文的例子即只需要對比一個li節點：
在這種情況下，雖然是使用「虛擬DOM」的「組件級更新」框架，但是已經很接近「節點級更新」框架了。
總結
本文按更新粒度介紹了三種不同類型的框架，以及Vue3在選擇JSX與模版語法時在靈活性與更新粒度間的靈活變化。
可以說是很符合中庸之道了。
有人會問，使用Vue3的用戶大部分都能接受「模版語法」，為什么不直接拋棄「虛擬DOM」，使用「預編譯技術」，實現真正的「節點級更新」?
一方面，「虛擬DOM」使框架脫離具體的視圖層，更方便跨端渲染。
另一方面，Vue2社區生態積累了大量基于「虛擬DOM」的庫。
如果是你，在這種情況下會作何選擇呢?
