1.源碼優(yōu)化：

a.使用monorepo來管理源碼

• Vue.js 2.x 的源碼托管在 src 目錄，然后依據(jù)功能拆分出了 compiler（模板編譯的相關(guān)代碼）、core（與平臺無關(guān)的通用運(yùn)行時(shí)代碼）、platforms（平臺專有代碼）、server（服務(wù)端渲染的相關(guān)代碼）、sfc（.vue 單文件解析相關(guān)代碼）、shared（共享工具代碼）等目錄。
• Vue.js 3.0，整個(gè)源碼是通過 monorepo 的方式維護(hù)的，根據(jù)功能將不同的模塊拆分到 packages 目錄下面不同的子目錄中，每個(gè) package 有各自的 API、類型定義和測試。

b.使用Typescript來開發(fā)源碼

• Vue.js 2.x 選用 Flow 做類型檢查，來避免一些因類型問題導(dǎo)致的錯(cuò)誤，但是 Flow 對于一些復(fù)雜場景類型的檢查，支持得并不好。
• Vue.js 3.0 拋棄了 Flow ，使用 TypeScript 重構(gòu)了整個(gè)項(xiàng)目。 TypeScript 提供了更好的類型檢查，能支持復(fù)雜的類型推導(dǎo)；由于源碼就使用 TypeScript 編寫，也省去了單獨(dú)維護(hù) d.ts 文件的麻煩。

2.性能優(yōu)化：

a.引入tree-shaking的技術(shù)

• tree-shaking 依賴 ES2015 模塊語法的靜態(tài)結(jié)構(gòu)（即 import 和 export），通過編譯階段的靜態(tài)分析，找到?jīng)]有引入的模塊并打上標(biāo)記。像我們在項(xiàng)目中沒有引入 Transition、KeepAlive 等不常用的組件，那么它們對應(yīng)的代碼就不會打包進(jìn)去。

b.移除了一些冷門的feature

• Vue.js 3.0 兼容了 Vue.js 2.x 絕大部分的api，但還是移除了一些比較冷門的feature：如 keyCode 支持作為 v-on 的修飾符、$on，$off 和 $once 實(shí)例方法、filter過濾、內(nèi)聯(lián)模板等。

3.響應(yīng)式實(shí)現(xiàn)優(yōu)化：

a.改用proxy api做數(shù)據(jù)劫持

• Vue.js 2.x 內(nèi)部是通過 Object.defineProperty 這個(gè) API 去劫持?jǐn)?shù)據(jù)的 getter 和 setter 來實(shí)現(xiàn)響應(yīng)式的。這個(gè) API 有一些缺陷，它必須預(yù)先知道要攔截的 key 是什么，所以它并不能檢測對象屬性的添加和刪除。
• Vue.js 3.0 使用了 Proxy API 做數(shù)據(jù)劫持，它劫持的是整個(gè)對象，自然對于對象的屬性的增加和刪除都能檢測到。

b.響應(yīng)式是惰性的

• 在 Vue.js 2.x 中，對于一個(gè)深層屬性嵌套的對象，要劫持它內(nèi)部深層次的變化，就需要遞歸遍歷這個(gè)對象，執(zhí)行 Object.defineProperty 把每一層對象數(shù)據(jù)都變成響應(yīng)式的，這無疑會有很大的性能消耗。
• 在 Vue.js 3.0 中，使用 Proxy API 并不能監(jiān)聽到對象內(nèi)部深層次的屬性變化，因此它的處理方式是在 getter 中去遞歸響應(yīng)式，這樣的好處是真正訪問到的內(nèi)部屬性才會變成響應(yīng)式，簡單的可以說是按需實(shí)現(xiàn)響應(yīng)式，就沒有那么大的性能消耗。

4.編譯優(yōu)化：

a.生成block tree

• Vue.js 2.x 的數(shù)據(jù)更新并觸發(fā)重新渲染的粒度是組件級的，單個(gè)組件內(nèi)部需要遍歷該組件的整個(gè) vnode 樹。
• Vue.js 3.0 做到了通過編譯階段對靜態(tài)模板的分析，編譯生成了 Block tree。Block tree 是一個(gè)將模版基于動態(tài)節(jié)點(diǎn)指令切割的嵌套區(qū)塊，每個(gè)區(qū)塊內(nèi)部的節(jié)點(diǎn)結(jié)構(gòu)是固定的。每個(gè)區(qū)塊只需要追蹤自身包含的動態(tài)節(jié)點(diǎn)。

b.slot編譯優(yōu)化

• Vue.js 2.x 中，如果有一個(gè)組件傳入了slot，那么每次父組件更新的時(shí)候，會強(qiáng)制使子組件update，造成性能的浪費(fèi)。
• Vue.js 3.0 優(yōu)化了slot的生成，使得非動態(tài)slot中屬性的更新只會觸發(fā)子組件的更新。動態(tài)slot指的是在slot上面使用v-if，v-for，動態(tài)slot名字等會導(dǎo)致slot產(chǎn)生運(yùn)行時(shí)動態(tài)變化但是又無法被子組件track的操作。

c.diff算法優(yōu)化

語法api優(yōu)化

a.優(yōu)化邏輯組織

• 使用 Vue.js 2.x 編寫組件本質(zhì)就是在編寫一個(gè)“包含了描述組件選項(xiàng)的對象”，可以把它稱為 Options API。我們按照 data、props、methods、computed 這些不同的選項(xiàng)來書寫對應(yīng)的代碼。這種方式對于小型的組件可能代碼還能一目了然，但對于大型組件要修改一個(gè)邏輯點(diǎn)，可能就需要在單個(gè)文件中不斷上下切換和尋找邏輯代碼。
• Vue.js 3.0 提供了一種新的 API：Composition API，它有一個(gè)很好的機(jī)制去解決這樣的問題，就是將某個(gè)邏輯關(guān)注點(diǎn)相關(guān)的代碼全都放在一個(gè)函數(shù)里，這樣在修改一個(gè)邏輯時(shí)，只需要改那一塊的代碼了。

b.優(yōu)化邏輯復(fù)用

• 在 Vue.js 2.x 中，我們一般會用 mixins 去復(fù)用邏輯。當(dāng)抽離并引用了大量的mixins，你就會發(fā)現(xiàn)兩個(gè)不可避免的問題：命名沖突和數(shù)據(jù)來源不清晰。
• Vue.js 3.0 設(shè)計(jì)的 Composition API，在邏輯復(fù)用方面就會很有優(yōu)勢了。

以上就是Vue3.0的優(yōu)化總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue3.0的優(yōu)化詳解的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論