Vue.js 從 1.x 到 2.0 版本，最大的升級就是引入了虛擬 DOM 的概念，它為后續(xù)做服務(wù)端渲染以及跨端框架 Weex 提供了基礎(chǔ)。

Vue.js 2.x 發(fā)展了很久，現(xiàn)在周邊的生態(tài)設(shè)施都已經(jīng)非常完善了，而且對于 Vue.js 用戶而言，它幾乎滿足了我們?nèi)粘ｉ_發(fā)的所有需求。在迭代 2.x 版本的過程中，小右發(fā)現(xiàn)了很多需要解決的痛點(diǎn)，比如源碼自身的維護(hù)性，數(shù)據(jù)量大后帶來的渲染和更新的性能問題，一些想舍棄但為了兼容一直保留的雞肋 API 等；另外，小右還希望能給開發(fā)人員帶來更好的編程體驗(yàn)，比如更好的 TypeScript 支持、更好的邏輯復(fù)用實(shí)踐等，所以他希望能從源碼、性能和語法 API 三個大的方面優(yōu)化框架。

那么接下來，我們就一起來看一下 Vue.js 3.0 具體做了哪些優(yōu)化， 了解Vue.js 3.0的升級給我們開發(fā)帶來什么收益。

一、源碼優(yōu)化1更好的代碼管理方式：monorepo>>>>

Vue.js 2.x

源碼托管在 src 目錄

src
├── compiler ? ? ? ?# 編譯相關(guān)
├── core ? ? ? ? ? ?# 核心代碼
├── platforms ? ? ? # 不同平臺的支持
├── server ? ? ? ? ?# 服務(wù)端渲染
├── sfc ? ? ? ? ? ? # .vue 文件解析
├── shared ? ? ? ? ?# 共享代碼

>>>>

Vue.js 3.0

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

@vue
├── compiler-core
│ ? ├── LICENSE
│ ? ├── README.md
│ ? ├── dist
│ ? │ ? ├── compiler-core.cjs.js
│ ? │ ? ├── compiler-core.cjs.prod.js
│ ? │ ? ├── compiler-core.d.ts
│ ? │ ? └── compiler-core.esm-bundler.js
│ ? ├── index.js
│ ? └── package.json
├── compiler-dom
│ ? …
├── reactivity
│ ? …
├── runtime-core
│ ? …
├── runtime-dom
│ ? …
└── shared
? ?…

2有類型的 JavaScript：TypeScript>>>>

Vue.js 2.x

使用Flow做類型檢查，Flow 是 Facebook 出品的 JavaScript 靜態(tài)類型檢查工具，它可以以非常小的成本對已有的 JavaScript 代碼遷入，非常靈活。但是Flow 對于一些復(fù)雜場景類型的檢查，支持得并不好。

>>>>

Vue.js 3.0

使用 TypeScript 重構(gòu)了整個項(xiàng)目。TypeScript提供了更好的類型檢查，能支持復(fù)雜的類型推導(dǎo)。

二、性能優(yōu)化1源碼體積優(yōu)化>>>>

Vue.js 3.0

移除一些冷門的 feature(比如 filter、inline-template 等)；

引入 tree-shaking 的技術(shù)，減少打包體積；

2數(shù)據(jù)劫持優(yōu)化>>>>

Vue.js 2.x

Vue.js 2.x是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來達(dá)到數(shù)據(jù)響應(yīng)效果的。大體思路參考下圖。(詳細(xì)原理自行學(xué)習(xí)，哈哈)

Vue.js 2.x 內(nèi)部是通過 Object.defineProperty 這個 API 去劫持?jǐn)?shù)據(jù)的 getter 和 setter，具體是這樣的：

Object.defineProperty(data,?'a',{
??get(){
????//?track
??},
??set(){
????//?trigger
??}
})

但這個 API 有一些缺陷:

它必須預(yù)先知道要攔截的 key 是什么，所以它并不能檢測對象屬性的添加和刪除。盡管 Vue.js 為了解決這個問題提供了 $set 和 $delete 實(shí)例方法；

對于嵌套層級較深的對象，如果要劫持它內(nèi)部深層次的對象變化，就需要遞歸遍歷這個對象，執(zhí)行 Object.defineProperty 把每一層對象數(shù)據(jù)都變成響應(yīng)式的。如果我們定義的響應(yīng)式數(shù)據(jù)過于復(fù)雜，這就會有相當(dāng)大的性能損耗；

>>>>

Vue.js 3.0

為了解決上述 2 個問題，Vue.js 3.0 使用了 Proxy API 做數(shù)據(jù)劫持，它的內(nèi)部是這樣的：

observed?=?new?Proxy(data,?{
??get()?{
????//?track
??},
??set()?{
????//?trigger
??}
})

使用了 Proxy API 做數(shù)據(jù)劫持，它劫持的是整個對象，對于對象的屬性的增加和刪除都能檢測到。

Proxy API 并不能監(jiān)聽到內(nèi)部深層次的對象變化，因此 Vue.js 3.0 的處理方式是在 getter 中去遞歸響應(yīng)式，這樣的好處是真正訪問到的內(nèi)部對象才會變成響應(yīng)式，而不是無腦遞歸，這樣無疑也在很大程度上提升了性能，我會在后面分析響應(yīng)式章節(jié)詳細(xì)介紹它的具體實(shí)現(xiàn)原理?。

3編譯優(yōu)化>>>>

Vue.js 2.x

通過數(shù)據(jù)劫持和依賴收集，Vue.js 2.x 的數(shù)據(jù)更新并觸發(fā)重新渲染的粒度是組件級的，雖然 Vue 能保證觸發(fā)更新的組件最小化，但在單個組件內(nèi)部依然需要遍歷該組件的整個 vnode 樹。這就會導(dǎo)致 vnode 的性能跟模版大小正相關(guān)，跟動態(tài)節(jié)點(diǎn)的數(shù)量無關(guān)，當(dāng)一些組件的整個模版內(nèi)只有少量動態(tài)節(jié)點(diǎn)時(shí)，這些遍歷都是性能的浪費(fèi)。

>>>>

Vue.js 3.0

通過編譯階段對靜態(tài)模板的分析，編譯生成了 Block tree。Block tree 是一個將模版基于動態(tài)節(jié)點(diǎn)指令切割的嵌套區(qū)塊，每個區(qū)塊內(nèi)部的節(jié)點(diǎn)結(jié)構(gòu)是固定的，而且每個區(qū)塊只需要以一個 Array 來追蹤自身包含的動態(tài)節(jié)點(diǎn)。借助 Block tree，Vue.js 將 vnode 更新性能由與模版整體大小相關(guān)提升為與動態(tài)內(nèi)容的數(shù)量相關(guān)。

三、語法 API 優(yōu)化1邏輯組織優(yōu)化>>>>

Vue.js 2.x

在 Vue.js 2.x 版本中，編寫組件本質(zhì)就是在編寫一個“包含了描述組件選項(xiàng)的對象”，我們把它稱為 Options API。Options API 的設(shè)計(jì)是按照 methods、computed、data、props 這些不同的選項(xiàng)進(jìn)行分類。和一個邏輯點(diǎn)相關(guān)的代碼可能寫在多個Option里，非常分散，如果需要修改一個邏輯點(diǎn)，就需要在單個文件中不斷切換和尋找。

>>>>

Vue.js 3.0

Vue.js 3.0 提供了一種新的 API：Composition API，它有一個很好的機(jī)制去解決這樣的問題，就是將某個邏輯關(guān)注點(diǎn)相關(guān)的代碼全都放在一個函數(shù)里，這樣當(dāng)需要修改一個功能時(shí)，就不再需要在文件中跳來跳去。

2邏輯復(fù)用優(yōu)化>>>>

Vue.js 2.x

我們通常會用 mixins 去復(fù)用邏輯。使用單個 mixin 似乎問題不大，但是當(dāng)我們一個組件混入大量不同的 mixins 的時(shí)候，會存在兩個非常明顯的問題：命名沖突和數(shù)據(jù)來源不清晰。

每個 mixin 都可以定義自己的 props、data，它們之間是無感的，所以很容易定義相同的變量，導(dǎo)致命名沖突；

對組件而言，如果模板中使用不在當(dāng)前組件中定義的變量，那么就會不太容易知道這些變量在哪里定義的，這就是數(shù)據(jù)來源不清晰；

>>>>

Vue.js 3.0

使用 hook 函數(shù)，整個數(shù)據(jù)來源清晰了，也不會出現(xiàn)命名沖突的問題。

3更好的類型支持

因?yàn)樗鼈兌际且恍┖瘮?shù)，在調(diào)用函數(shù)時(shí)，自然所有的類型就被推導(dǎo)出來了。不像 Options API 所有的東西使用 this。

4tree-shaking 友好

tree-shaking有一個兩個要求(對tree-shaking不熟的，還是自行去學(xué)習(xí)，哈哈)：

必須是import導(dǎo)入。

是必須是單個函數(shù)或常量導(dǎo)出

>>>>

Vue.js 2.x

直接導(dǎo)出的是整個vue實(shí)例，如果我們只是簡單的用某一些功能的話就有點(diǎn)累贅。

>>>>

Vue.js 3.0

用到的函數(shù)可以通過import聲明，對“按需加載”有更好的支持。

注意

Composition API 屬于 API 的增強(qiáng)，它并不是 Vue.js 3.0 組件開發(fā)的范式，如果組件足夠簡單，可以使用 Options API。

本文主要總結(jié)了 Vue.js 3.0 升級做了幾個方面的優(yōu)化，以及為什么會需要這些優(yōu)化。希望學(xué)習(xí)完后我們也可以像小右一樣去審視自己的工作，有哪些痛點(diǎn)，找到可以改進(jìn)和努力的方向并實(shí)施，只有這樣才能夠不斷提升自己的能力，工作上也會有不錯的產(chǎn)出。

資料參考來源：

黃軼老師--《Vue.js 3.0 核心源碼解析》課程

感謝閱讀~~掃碼關(guān)注我們前端麻辣燙仙女都在看點(diǎn)點(diǎn)點(diǎn)，贊和在看都在這兒！ 與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的vue 3.0和2.0区别_一文看懂 Vue.js 3.0 的优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。