Vue3.0的優(yōu)化總結(jié)

更新時(shí)間：2020年10月16日 08:27:26 作者：小磊哥er

在本篇文章里小編給大家整理的是一篇關(guān)于Vue3.0的優(yōu)化總結(jié)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。

a.使用monorepo來管理源碼

Vue.js 2.x 的源碼托管在 src 目錄，然后依據(jù)功能拆分出了 compiler（模板編譯的相關(guān)代碼）、core（與平臺(tái)無關(guān)的通用運(yùn)行時(shí)代碼）、platforms（平臺(tái)專有代碼）、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 對(duì)于一些復(fù)雜場景類型的檢查，支持得并不好。
Vue.js 3.0 拋棄了 Flow ，使用 TypeScript 重構(gòu)了整個(gè)項(xiàng)目。 TypeScript 提供了更好的類型檢查，能支持復(fù)雜的類型推導(dǎo)；由于源碼就使用 TypeScript 編寫，也省去了單獨(dú)維護(hù) d.ts 文件的麻煩。

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

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

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 是什么，所以它并不能檢測對(duì)象屬性的添加和刪除。
Vue.js 3.0 使用了 Proxy API 做數(shù)據(jù)劫持，它劫持的是整個(gè)對(duì)象，自然對(duì)于對(duì)象的屬性的增加和刪除都能檢測到。

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

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

a.生成block tree

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

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

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

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

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

使用 Vue.js 2.x 編寫組件本質(zhì)就是在編寫一個(gè)“包含了描述組件選項(xiàng)的對(duì)象”，可以把它稱為 Options API。我們按照 data、props、methods、computed 這些不同的選項(xiàng)來書寫對(duì)應(yīng)的代碼。這種方式對(duì)于小型的組件可能代碼還能一目了然，但對(duì)于大型組件要修改一個(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 中，我們一般會(huì)用 mixins 去復(fù)用邏輯。當(dāng)抽離并引用了大量的mixins，你就會(huì)發(fā)現(xiàn)兩個(gè)不可避免的問題：命名沖突和數(shù)據(jù)來源不清晰。
Vue.js 3.0 設(shè)計(jì)的 Composition API，在邏輯復(fù)用方面就會(huì)很有優(yōu)勢了。

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

您可能感興趣的文章: