第一篇 框架設(shè)計概覽

權(quán)衡的藝術(shù)

視圖層框架通常分為命令式和聲明式

• 命令式框架的一大特點就是關(guān)注過程
• 聲明式框架更注重結(jié)果

Vue.js的內(nèi)部實現(xiàn)一定是命令式的, 而暴露給用戶卻是聲明式的

性能和可維護(hù)性的權(quán)衡

聲明式代碼的性能不優(yōu)于命令式代碼的性能

如果把直接修改的性能消耗定義為A, 把找出差異的性能消耗定義為B, 那么:

• 命令式代碼的更新性能消耗 = A
• 聲明式代碼的更新性能消耗 = B + A

既然聲明式比命令式多出了查找差異的性能消耗, 那為什么vue.js要選擇聲明式而不是命令式呢?

聲明式代碼可維護(hù)性更強(qiáng), 在采用命令式開發(fā)的時候, 我們需要維護(hù)實現(xiàn)目標(biāo)的整個過程, 而聲明式代碼展示的就是我們要的結(jié)果, 看上去更加美觀, 至于做事的過程我們不需要關(guān)心，vue的底層會幫我們?nèi)プ龅暨@些東西

那么如何在保持可維護(hù)性的同時, 讓性能損失最小化呢?

下一節(jié)

虛擬DOM的性能到底如何

虛擬DOM的出現(xiàn), 解決了什么問題?

聲明式代碼比命令式代碼多出一個找出差異的性能損耗，所以為了最小化這一差異化。出現(xiàn)了虛擬dom

虛擬DOM到底是什么呢?

其實就是對html標(biāo)簽進(jìn)行抽象化的一個樹形結(jié)構(gòu)的數(shù)據(jù)對象

對比一下innerHtml和虛擬dom創(chuàng)建頁面的性能:

• innerHTML創(chuàng)建頁面的性能：HTML字符串拼接的計算量 + innerHTML的dom計算
• 虛擬DOM創(chuàng)建頁面的性能: 創(chuàng)建JavaScript對象的計算量 + 創(chuàng)建真實DOM的計算量

在創(chuàng)建頁面的時候，兩者的差異并不大，因為他們都需要新建所有的DOM元素。

接下來, 看看他們更新頁面時的性能

• innerHTML更新頁面的過程是 重構(gòu)HTML字符串，在重新設(shè)置DOM元素的innerHTML屬性。哪怕只更改了一個字，我們也需要重新設(shè)置innerHTML。約等于銷毀所有的dom元素，然后再重新創(chuàng)建全新的dom元素
• 虛擬dom更新頁面：重新創(chuàng)建js對象（虛擬dom樹），然后再比較新舊虛擬dom，找到它的差異，并且更新他。

虛擬dom，它是聲明式的，因此心智負(fù)擔(dān)小，可維護(hù)性強(qiáng)，性能雖然比不上極致優(yōu)化的js對象，但是在 保證可維護(hù)性 和 保證心智負(fù)擔(dān) 的前提下想當(dāng)不錯。