之前寫的關(guān)于 vue3 的文章，好多人吐槽：這些API每次使用都要引入一遍，感覺有點麻煩。

今天我們就來看看 vue3 相比 vue2 的優(yōu)點有些啥?

為啥有些人說：自從寫了 ts vue3 再也回不到 vue2 啦!

vue3 到底哪里好?有的人回不到 vue2，而有的人去不了vue3!

一、Vue3 新增的幾個亮點：

• Performance：性能優(yōu)化
• Tree-shaking ：支持搖樹優(yōu)化
• Composition API ：組合式api
• 新增組件：Fragment、Teleport、Supense
• 更好地支持 ts
• Custom Render API：自定義渲染器

二、性能方面的提升

在性能方面，vue3 相比 vue2 ，性能提升了 1.3 ~ 2 倍左右。我們就來看看它是在哪些方面，如何提升的?

2.1、響應(yīng)式性能提升

1> diff方法優(yōu)化

diff 算法是虛擬 DOM 技術(shù)的必然產(chǎn)物，它會對新舊 DOM 進行比較，然后將變化的 DOM 更新在真實的 DOM 上。

在 vue2 中，數(shù)據(jù)發(fā)生變化的時候，會生成一個新的 DOM 樹，然后和之前的 DOM 樹進行比較，找到不同的節(jié)點然后更新到真實的 DOM 上，比較的過程中，會對沒有發(fā)生改變的 DOM 也都會進行比較，就會消耗一定的時間。

在 vue3 中，在創(chuàng)建虛擬 DOM 的時候，會根據(jù) DOM 中的內(nèi)容添加一個靜態(tài)標記，在數(shù)據(jù)發(fā)生改變的時候，就會帶著靜態(tài)標記的節(jié)點去對比，能夠快速找到變化的 DOM 。

2> 事件偵聽器緩存

默認情況下onClick會被視為動態(tài)綁定，所以每次都會追蹤它的變化

但是因為是同一個函數(shù)，所以不用追蹤變化，直接緩存起來復(fù)用即可

3> ssr渲染

當存在大量靜態(tài)內(nèi)容時，這些內(nèi)容會被當做純字符串推進一個 buffer 內(nèi)，即使存在動態(tài)綁定，也會通過模板插值潛入進去，這樣會比虛擬 DOM 渲染快得多。

2.2、代碼體積方面

打包大小減少41%。

vue3 移除了一些不常用的 API，如：inline-template、filter 等，使用 tree-shaking。

Tree Shaking 搖樹優(yōu)化，指的就是當我們引入一個模塊的時候，不引入這個模塊的所有代碼，只引入我們需要的代碼。

在 vue2 中，很多函數(shù)都掛載到全局 Vue 對象上，如：nextTick、set 函數(shù)等，雖然我們不常用，但打包時只要引入 Vue 這些全局函數(shù)會打包進 bundle 中。而 vue3 中，引入tree-shaking，所有的 API 都通過 ES6 模塊化的方式引入，這樣就能夠讓 webpack 或 rollup 等打包工具在打包時，就會自動對沒有用到的 API 進行剔除，最小化 bundle 體積。

初次渲染快55%, 更新渲染快133%。組件選擇了按需引入，使得打包后的體積也更小了，所以項目運行的時候速度更快，更順暢了!

2.3、編譯被優(yōu)化

1> 靜態(tài)提升

在 vue2 中，無論元素是否參與更新，每次都會重新創(chuàng)建然后再渲染。

vue3 使用靜態(tài)提升后，對于不參與更新的元素，只會被創(chuàng)建一次，在渲染時直接復(fù)用就好了。

2> Fragment

模板內(nèi)不用再創(chuàng)建一個唯一根節(jié)點，可以直接放同級標簽和內(nèi)容。就相當于少了一個節(jié)點嵌套渲染。

三、選項式 api VS 組合式 api

3.1、vue3 的組合式 api 相對來說，更有利于維護和封裝。

3.2、組合式 api 高內(nèi)聚，低耦合。

在 vue2 中采用選項式 api ，會在 vue 文件的 data、methods、watch、computed 中定義屬性和方法，共同處理頁面邏輯，多個功能相互交叉，纏繞在一起，代碼過于分散。

而 vue3 新增了組合式 api ，一個功能模塊代碼會集中到一起，實現(xiàn)高內(nèi)聚，低耦合。提高代碼的可讀性和可維護性，基于函數(shù)組合的 api 更好地重用邏輯代碼。

組合式api 與 選項式api 對比如下圖：

每個顏色，都代表著一個功能。

3.3、不宜出現(xiàn) DOM 元素不存在問題。

vue3 中用 setup 函數(shù)代替了 vue2 中的 beforeCreate 和 created 。有些同學(xué)有時候會在 created 中操作 DOM 元素，有時候報錯了，就在那納悶看不出來問題，為了沒有反應(yīng)。使用 setup 之后，就不容易出現(xiàn)該問題了。

注意：

vue3 的組合式 api 中的 onUnmounted 代替了 vue2 中的 beforeDestory。

vue3 的組合式 api unmounted 代替了 vue2 中的 destoryed 。

四、proxy 相對 Object.defineProperty 優(yōu)點有哪些?

proxy 和 Object.defineProperty 都是來實現(xiàn)響應(yīng)式數(shù)據(jù)的。

vue3 使用 proxy 來代替 vue2 的 Object.defineProperty 效率更高，值得學(xué)習。

1> vue2 利用 Object.defineProperty 來劫持 data 數(shù)據(jù)的 getter 和 setter 操作，使得 data 在被訪問或賦值時，動態(tài)更新綁定的 template 模板。而 Object.defineProperty 必須遍歷所有的預(yù)值才能劫持每一個屬性，這一缺點正好能夠被 proxy 解決。

proxy 相比 Object.defineProperty 優(yōu)點分別為：

• 代碼的執(zhí)行效果更快。
• proxy 可以直接監(jiān)聽對象而不是它的屬性。
• proxy 可以直接監(jiān)聽數(shù)組的每個元素的變化。
• proxy 不需要初始化的時候遍歷所有屬性，如果有多層嵌套的話，只訪問某個屬性的時候，proxy 能夠快速訪問到，而 Object.defineProperty 還需要遍歷所有屬性，然后逐級向下訪問。
• proxy 返回的是一個新對象，可以直接操作新對象而達到目標。而 Object.defineProperty 操作的是原對象，只能遍歷對象屬性然后對其直接修改。
• proxy 有 13 種攔截方法，不限于 apply、ownKeys、deleteProperty 等，而 Object.defineporperty 不具備。

2> defineProperty 無法監(jiān)聽對象新增屬性以及無法跟蹤數(shù)組索引以及數(shù)組 length 的問題，proxy 正好解決了該問題。

在 vue2 中，我們給對象新增一個屬性時，如果新增屬性的值發(fā)生改變的時候，我們發(fā)現(xiàn)視圖并沒有更新，因為新增屬性是無法監(jiān)聽到的。同樣的，通過下標直接改變數(shù)組，視圖也是無法更新的，也是因為監(jiān)聽不到。

在 vue3 中新增 proxy ，解決了這些問題。

五、更好的 ts 支持

vue2 不適合使用 ts，在于它的 Options API 風格。

options 是一個簡單的對象，而 ts 是一種類型系統(tǒng)、面向?qū)ο蟮恼Z法，兩個不匹配。

vue3 新增了 defineComponent 函數(shù)，使組件在 ts 下，更好的利用參數(shù)類型推斷。如：reactive 和 ref 很具有代表性。

六、更先進的組件

1> Fragment

在 vue2 中，每個模板必須有一個根節(jié)點，否則就會報錯。

vue3 中可以不需要根節(jié)點，多個元素或標簽可并列存在。

2> Teleport

傳送門?？梢园?teleport 中的內(nèi)容添加到任意的節(jié)點內(nèi)，對于嵌套較深的組件來說絕對是一個福音。

3> Supense

允許程序在等待異步組件渲染一些后備的內(nèi)容，可以讓我們創(chuàng)建一個平滑的用戶體驗。

總結(jié)：

vue 目前是國內(nèi)最火的前端框架之一，vue3 性能提升、運行速度也比 vue2 好很多。

總之 vue3 就是:

• 讓項目更快
• 讓代碼更少
• 更易于維護
• 讓我們開發(fā)更快，加班更少