一文看懂Vue3.0的優化


1.源碼優化:

a.使用monorepo來管理源碼

  • Vue.js 2.x 的源碼托管在 src 目錄,然后依據功能拆分出了 compiler(模板編譯的相關代碼)、core(與平台無關的通用運行時代碼)、platforms(平台專有代碼)、server(服務端渲染的相關代碼)、sfc(.vue 單文件解析相關代碼)、shared(共享工具代碼)等目錄。

  • Vue.js 3.0,整個源碼是通過 monorepo 的方式維護的,根據功能將不同的模塊拆分到 packages 目錄下面不同的子目錄中,每個 package 有各自的 API、類型定義和測試。

b.使用Typescript來開發源碼

  • Vue.js 2.x 選用 Flow 做類型檢查,來避免一些因類型問題導致的錯誤,但是 Flow 對於一些復雜場景類型的檢查,支持得並不好。

  • Vue.js 3.0 拋棄了 Flow ,使用 TypeScript 重構了整個項目。 TypeScript 提供了更好的類型檢查,能支持復雜的類型推導;由於源碼就使用 TypeScript 編寫,也省去了單獨維護 d.ts 文件的麻煩。

2.性能優化:

a.引入tree-shaking的技術

  • tree-shaking 依賴 ES2015 模塊語法的靜態結構(即 import 和 export),通過編譯階段的靜態分析,找到沒有引入的模塊並打上標記。像我們在項目中沒有引入 Transition、KeepAlive 等不常用的組件,那么它們對應的代碼就不會打包進去。

b.移除了一些冷門的feature

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

3.響應式實現優化:

a.改用proxy api做數據劫持

  • Vue.js 2.x 內部是通過 Object.defineProperty 這個 API 去劫持數據的 getter 和 setter 來實現響應式的。這個 API 有一些缺陷,它必須預先知道要攔截的 key 是什么,所以它並不能檢測對象屬性的添加和刪除。

  • Vue.js 3.0 使用了 Proxy API 做數據劫持,它劫持的是整個對象,自然對於對象的屬性的增加和刪除都能檢測到。

b.響應式是惰性的

  • 在 Vue.js 2.x 中,對於一個深層屬性嵌套的對象,要劫持它內部深層次的變化,就需要遞歸遍歷這個對象,執行 Object.defineProperty 把每一層對象數據都變成響應式的,這無疑會有很大的性能消耗。

  • 在 Vue.js 3.0 中,使用 Proxy API 並不能監聽到對象內部深層次的屬性變化,因此它的處理方式是在 getter 中去遞歸響應式,這樣的好處是真正訪問到的內部屬性才會變成響應式,簡單的可以說是按需實現響應式,就沒有那么大的性能消耗。

4.編譯優化:

a.生成block tree

  • Vue.js 2.x 的數據更新並觸發重新渲染的粒度是組件級的,單個組件內部需要遍歷該組件的整個 vnode 樹。

  • Vue.js 3.0 做到了通過編譯階段對靜態模板的分析,編譯生成了 Block tree。Block tree 是一個將模版基於動態節點指令切割的嵌套區塊,每個區塊內部的節點結構是固定的。每個區塊只需要追蹤自身包含的動態節點。

b.slot編譯優化

  • Vue.js 2.x 中,如果有一個組件傳入了slot,那么每次父組件更新的時候,會強制使子組件update,造成性能的浪費。

  • Vue.js 3.0 優化了slot的生成,使得非動態slot中屬性的更新只會觸發子組件的更新。動態slot指的是在slot上面使用v-if,v-for,動態slot名字等會導致slot產生運行時動態變化但是又無法被子組件track的操作。

c.diff算法優化

語法api優化

a.優化邏輯組織

  • 使用 Vue.js 2.x 編寫組件本質就是在編寫一個“包含了描述組件選項的對象”,可以把它稱為 Options API。我們按照 data、props、methods、computed 這些不同的選項來書寫對應的代碼。這種方式對於小型的組件可能代碼還能一目了然,但對於大型組件要修改一個邏輯點,可能就需要在單個文件中不斷上下切換和尋找邏輯代碼。

  • Vue.js 3.0 提供了一種新的 API:Composition API,它有一個很好的機制去解決這樣的問題,就是將某個邏輯關注點相關的代碼全都放在一個函數里,這樣在修改一個邏輯時,只需要改那一塊的代碼了。

b.優化邏輯復用

  • 在 Vue.js 2.x 中,我們一般會用 mixins 去復用邏輯。當抽離並引用了大量的mixins,你就會發現兩個不可避免的問題:命名沖突和數據來源不清晰。

  • Vue.js 3.0 設計的 Composition API,在邏輯復用方面就會很有優勢了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM