[[412125]]

大家好，我是卡頌。

都說(shuō)中國(guó)人講究中庸之道，中國(guó)人造的框架講究么?

本文會(huì)從原理層面講解Vue是如何在運(yùn)行時(shí)與編譯時(shí)之間保持中庸的平衡。

UI = fn(state)

幾乎所有前端框架工作原理都能用如下公式概括：

UI = fn(state) 

UI(視圖)可以通過(guò)state(狀態(tài))經(jīng)過(guò)fn(框架)計(jì)算得出。

然而具體原理上，框架之間卻千差萬(wàn)別。

可以按照「更新粒度」將他們分為三類：

• 樹級(jí)更新
• 組件級(jí)更新
• 節(jié)點(diǎn)級(jí)更新

更新粒度沒(méi)有優(yōu)劣之分，只是對(duì)應(yīng)不同的實(shí)現(xiàn)

接下來(lái)我們簡(jiǎn)單了解下不同粒度更新方式的實(shí)現(xiàn)原理。

假設(shè)有如下組件樹，其中Cpn是一個(gè)自定義組件，內(nèi)部結(jié)構(gòu)為ul>li*2：

我們希望將Cpn內(nèi)的一個(gè)li更新為黃色：

樹級(jí)更新

「樹級(jí)更新」的框架會(huì)再生成一棵完整「虛擬DOM樹」，生成過(guò)程中與之前的「虛擬DOM樹」對(duì)應(yīng)節(jié)點(diǎn)進(jìn)行比較：

找到變化的節(jié)點(diǎn)后，執(zhí)行對(duì)應(yīng)DOM操作。

「樹級(jí)更新」框架的特點(diǎn)是：

• 依賴「虛擬DOM」
• 不關(guān)心觸發(fā)更新的節(jié)點(diǎn)(因?yàn)闀?huì)通過(guò)「虛擬DOM」的全樹對(duì)比找到他)

采用這種更新方式最有名的框架就是React。

組件級(jí)更新

上面的例子，如果是「組件級(jí)更新」框架。

會(huì)找到觸發(fā)更新節(jié)點(diǎn)所在組件，生成該組件的「虛擬DOM樹」(而不是全樹的「虛擬DOM樹」)，生成過(guò)程中與該組件之前的「虛擬DOM樹」對(duì)應(yīng)節(jié)點(diǎn)進(jìn)行比較：

找到變化的節(jié)點(diǎn)后，執(zhí)行對(duì)應(yīng)DOM操作。

「組件級(jí)更新」框架的特點(diǎn)是：

• 依賴「虛擬DOM」
• 關(guān)心觸發(fā)更新的節(jié)點(diǎn)(「虛擬DOM」的對(duì)比會(huì)作用于該節(jié)點(diǎn)所在組件)

采用這種更新方式最有名的框架就是Vue。

節(jié)點(diǎn)級(jí)更新

如果是「節(jié)點(diǎn)級(jí)更新」框架，在編譯時(shí)會(huì)根據(jù)「狀態(tài)變化對(duì)應(yīng)的DOM變化」直接生成對(duì)應(yīng)方法，當(dāng)狀態(tài)改變后直接調(diào)用對(duì)應(yīng)方法。

上面的例子，在編譯時(shí)會(huì)關(guān)聯(lián)color狀態(tài)與changeColor方法：

function changeColor(newColor) { 
  li.style.color = newColor; 
} 

當(dāng)改變color狀態(tài)后直接調(diào)用changeColor方法更新li對(duì)應(yīng)DOM。

「節(jié)點(diǎn)級(jí)更新」框架的特點(diǎn)是：

• 不依賴「虛擬DOM」，依賴預(yù)編譯(建立狀態(tài)與改變DOM的方法之間的聯(lián)系)
• 關(guān)心觸發(fā)更新的節(jié)點(diǎn)(節(jié)點(diǎn)狀態(tài)與更新方法一一對(duì)應(yīng))

采用這種更新方式最有名的框架就是Svelte。

中庸的Vue3

Vue作為「組件級(jí)更新」代表，更新粒度介于「樹級(jí)」與「節(jié)點(diǎn)級(jí)」之間。那到底是中間偏左呢，還是中間偏右呢?

Vue3說(shuō)：

我要反復(fù)橫跳，兩邊我都要

Vue3中包含三種樹狀結(jié)構(gòu)：

描述視圖的樹 -> 虛擬DOM樹 -> 真實(shí)DOM樹 

其中「描述視圖的樹」官方推薦使用「模版語(yǔ)法」，但也能使用JSX。

不管是哪種方式，最終都會(huì)轉(zhuǎn)化為「虛擬DOM樹」。

當(dāng)使用JSX時(shí)，Vue3擁有了React運(yùn)行時(shí)的靈活性，此時(shí)的Vue3可以看作是「加強(qiáng)版React + Mobx」

當(dāng)使用「模版語(yǔ)法」，Vue3引入了「預(yù)編譯」技術(shù)。此時(shí)可以將Vue3的工作流程細(xì)化為四步：

描述視圖的樹 -> VNode樹 -> Block數(shù)組 -> 真實(shí)DOM樹 

其中VNode樹就是常規(guī)意義的「虛擬DOM樹」，Block數(shù)組則為「VNode樹」中對(duì)狀態(tài)有依賴，會(huì)變化的那部分VNode組成的數(shù)組。

比如，對(duì)于如下模版語(yǔ)法：

<template> 
  <section> 
    <div>i am</div> 
    <p>{{name}}</p> 
  </section> 
</template> 

section與div不包含狀態(tài)，不會(huì)變化，所以會(huì)轉(zhuǎn)化為VNode，但是沒(méi)有對(duì)應(yīng)Block。

p包含狀態(tài)name，會(huì)轉(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)行比較。

用上文的例子即只需要對(duì)比一個(gè)li節(jié)點(diǎn)：

在這種情況下，雖然是使用「虛擬DOM」的「組件級(jí)更新」框架，但是已經(jīng)很接近「節(jié)點(diǎn)級(jí)更新」框架了。

總結(jié)

本文按更新粒度介紹了三種不同類型的框架，以及Vue3在選擇JSX與模版語(yǔ)法時(shí)在靈活性與更新粒度間的靈活變化。

可以說(shuō)是很符合中庸之道了。

有人會(huì)問(wèn)，使用Vue3的用戶大部分都能接受「模版語(yǔ)法」，為什么不直接拋棄「虛擬DOM」，使用「預(yù)編譯技術(shù)」，實(shí)現(xiàn)真正的「節(jié)點(diǎn)級(jí)更新」?

一方面，「虛擬DOM」使框架脫離具體的視圖層，更方便跨端渲染。

另一方面，Vue2社區(qū)生態(tài)積累了大量基于「虛擬DOM」的庫(kù)。

如果是你，在這種情況下會(huì)作何選擇呢?