淺談Vue3的幾個優勢
目錄
- 1、原始碼
- 1.1 monorepo
- 1.2 TypeScript
- 2、效能
- 2.1 優化原始碼體積
- 2.3 Proxy
- 2.4 Composition API
2已經非常優秀，且具備完善的社群和生態，但是Vue3仍然在原始碼、效能和語法 API 三個大的方面進行了優化
1、原始碼
1.1 monorepo
原始碼管理方式採用monorepo的方式進行管理，monorepo 把這些模組拆分到不同的 package 中，每個 package 有各自的 API、型別定義和測試。這樣使得模組拆分更細化，職責劃分更明確，模組之間的依賴關係也更加明確，開發人員也更容易閱讀、理解和更改所有模組原始碼，提高程式碼的可維護性
1.2 TypeScript
Vue2時期選擇的是flow，由於flow自身存在一些功能上的短板，且TS發展勢頭更好，Vue3選擇使用TS編寫程式碼，也可以更好的支援TS提升開發體驗
2、效能
2.1 優化原始碼體積
主要從兩個方面進行了原始碼體積優化：
移除一些冷門API，比如 fwww.cppcns.comilter、inline-template 等
API減少，必然會減少程式碼體積，這點非常容易理解
引入tree-shaking 減少打包體積
tree-shaking 依賴 ES2015 模組語法的靜態結構（即 import 和 export），通過編譯階段的靜態分析，找到沒有引入的模組並szOrBbZb
webpack等打包工具上已經非常普及
在Vue3中的應用：我們大概率不會使用Vue提供的全部API，總會有一些冷門的、業務場景單一使用不到的API，那麼在打包的過程中就可以將這些沒有被使用者使用的API移除，減少打包體積
2.3 Proxy
Vue2之前使用Object.defineProperty進行資料劫持
Object.defineProperty(source,key,{
get(){
// todo...
},set(){
// todo...
}
})
其存在一些缺陷
- 必須預先知道劫持的
key是什麼，並不能很好的監聽到物件屬性的新增、刪除 - 初始化時遞迴遍歷整個
data，導致深層巢狀資料結構造成效能負擔， Vue3使用Proxy進行資料劫持，可以很好的規避Object.defineProperty帶來的缺陷
p = new Proxy(source,{
get() {
// todo...
},set() {
// todo...
}
})
2.4 Composition APIhttp://www.cppcns.com
Vue3 在語法方面進行了優化，主要是提供了 Composition API替換原本的Options API
Options API提供了 methods、cowww.cppcns.commputed、data、props以及各個階段的生命鉤子選項，開發者可以在每個API中做著對應的事情，各司其職，上手和理解成本非常低，對於新手開發者非常友好。使用其開發小型專案時程式碼的閱讀性、維護性等也是可觀的，但是當遇到大型專案或者較為複雜的業務邏輯時，程式碼將會變得非常難以維護，常常導致修改一個功能需要在程式碼中跳轉多個地方，一個功能的程式碼分散在各個地方，造成閱讀和理解成本直線增加，Composition API，它有一個很好的機制去解決這樣的問題，就是將某個邏輯關注點相關的程式碼全都放在一個函式裡，這樣當需要修改一個功能時，就不再需要在檔案中跳來跳去
到此這篇關於淺談Vue3的幾個優勢的文章就介紹到這了,更多相關Vue3優勢內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！