Vue3有什么優(yōu)勢(shì)

這篇文章主要介紹了Vue3有什么優(yōu)勢(shì)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1、源碼

1.1 monorepo

源碼管理方式采用monorepo的方式進(jìn)行管理，monorepo 把這些模塊拆分到不同的 package 中，每個(gè) package 有各自的 API、類型定義和測(cè)試。這樣使得模塊拆分更細(xì)化，職責(zé)劃分更明確，模塊之間的依賴關(guān)系也更加明確，開發(fā)人員也更容易閱讀、理解和更改所有模塊源碼，提高代碼的可維護(hù)性

1.2 TypeScript

Vue2時(shí)期選擇的是flow，由于flow自身存在一些功能上的短板，且TS發(fā)展勢(shì)頭更好，Vue3選擇使用TS編寫代碼，也可以更好的支持TS提升開發(fā)體驗(yàn)

2、性能

2.1 優(yōu)化源碼體積

主要從兩個(gè)方面進(jìn)行了源碼體積優(yōu)化：

移除一些冷門API，比如 filter、inline-template 等

API減少，必然會(huì)減少代碼體積，這點(diǎn)非常容易理解

引入tree-shaking 減少打包體積

tree-shaking 依賴 ES2015 模塊語法的靜態(tài)結(jié)構(gòu)（即 import 和 export），通過編譯階段的靜態(tài)分析，找到?jīng)]有引入的模塊并打上標(biāo)記，這個(gè)技術(shù)在webpack等打包工具上已經(jīng)非常普及

在Vue3中的應(yīng)用：我們大概率不會(huì)使用Vue提供的全部API，總會(huì)有一些冷門的、業(yè)務(wù)場(chǎng)景單一使用不到的API，那么在打包的過程中就可以將這些沒有被用戶使用的API移除，減少打包體積

2.3 Proxy

Vue2之前使用Object.defineProperty進(jìn)行數(shù)據(jù)劫持

Object.defineProperty(source, key, {
  get(){
    // todo...
  },
  set(){
    // todo...
  }
})

其存在一些缺陷

• 必須預(yù)先知道劫持的key是什么，并不能很好的監(jiān)聽到對(duì)象屬性的添加、刪除

• 初始化時(shí)遞歸遍歷整個(gè)data，導(dǎo)致深層嵌套數(shù)據(jù)結(jié)構(gòu)造成性能負(fù)擔(dān)，

• Vue3使用Proxy進(jìn)行數(shù)據(jù)劫持，可以很好的規(guī)避Object.defineProperty帶來的缺陷

p = new Proxy(source, {
  get() {
    // todo...
  },
  set() {
    // todo...
  }
})

2.4 Composition API

Vue3 在語法方面進(jìn)行了優(yōu)化，主要是提供了 Composition API替換原本的Options API

Options API提供了 methods、computed、data、props以及各個(gè)階段的生命鉤子選項(xiàng)，開發(fā)者可以在每個(gè)API中做著對(duì)應(yīng)的事情，各司其職，上手和理解成本非常低，對(duì)于新手開發(fā)者非常友好。使用其開發(fā)小型項(xiàng)目時(shí)代碼的閱讀性、維護(hù)性等也是可觀的，但是當(dāng)遇到大型項(xiàng)目或者較為復(fù)雜的業(yè)務(wù)邏輯時(shí)，代碼將會(huì)變得非常難以維護(hù)，常常導(dǎo)致修改一個(gè)功能需要在代碼中跳轉(zhuǎn)多個(gè)地方，一個(gè)功能的代碼分散在各個(gè)地方，造成閱讀和理解成本直線增加，Composition API，它有一個(gè)很好的機(jī)制去解決這樣的問題，就是將某個(gè)邏輯關(guān)注點(diǎn)相關(guān)的代碼全都放在一個(gè)函數(shù)里，這樣當(dāng)需要修改一個(gè)功能時(shí)，就不再需要在文件中跳來跳去

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue3有什么優(yōu)勢(shì)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!