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