日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
中國人中庸之道，中國人造的框架呢？

大家好，我是卡頌。

成都創(chuàng)新互聯(lián)專注于豐澤企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),成都做商城網(wǎng)站。豐澤網(wǎng)站建設(shè)公司,為豐澤等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

都說中國人講究中庸之道，中國人造的框架講究么?

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

UI = fn(state)

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

 
 
 
 
    
  
  
  
  
  1. UI = fn(state) 
    2.

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

然而具體原理上，框架之間卻千差萬別。

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

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

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

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

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

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

樹級(jí)更新

「樹級(jí)更新」的框架會(huì)再生成一棵完整「虛擬DOM樹」，生成過程中與之前的「虛擬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ì)通過「虛擬DOM」的全樹對(duì)比找到他)

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

組件級(jí)更新

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

會(huì)找到觸發(fā)更新節(jié)點(diǎn)所在組件，生成該組件的「虛擬DOM樹」(而不是全樹的「虛擬DOM樹」)，生成過程中與該組件之前的「虛擬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方法：

 
 
 
 
    
  
  
  
  
  1. function changeColor(newColor) { 
    2.   
  
  
  
  2.   li.style.color = newColor; 
    3.   
  
  
  
  3. } 
    4.

當(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說：

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

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

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

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

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

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

section與div不包含狀態(tài)，不會(huì)變化，所以會(huì)轉(zhuǎn)化為VNode，但是沒有對(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與模版語法時(shí)在靈活性與更新粒度間的靈活變化。

可以說是很符合中庸之道了。

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

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

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

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


名稱欄目：中國人中庸之道，中國人造的框架呢？
文章起源：http://www.5511xx.com/article/dhespih.html