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