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

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

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

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

一、Vue3 新增的幾個(gè)亮點(diǎn)：

• 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)物，它會(huì)對(duì)新舊 DOM 進(jìn)行比較，然后將變化的 DOM 更新在真實(shí)的 DOM 上。

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

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

2> 事件偵聽器緩存

默認(rèn)情況下onClick會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)追蹤它的變化

但是因?yàn)槭峭粋€(gè)函數(shù)，所以不用追蹤變化，直接緩存起來復(fù)用即可

3> ssr渲染

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

2.2、代碼體積方面

打包大小減少41%。

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

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

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

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

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

1> 靜態(tài)提升

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

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

2> Fragment

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

三、選項(xiàng)式 api VS 組合式 api

3.1、vue3 的組合式 api 相對(duì)來說，更有利于維護(hù)和封裝。

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

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

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

組合式api 與 選項(xiàng)式api 對(duì)比如下圖：

每個(gè)顏色，都代表著一個(gè)功能。

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

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

注意：

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

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

四、proxy 相對(duì) Object.defineProperty 優(yōu)點(diǎn)有哪些?

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

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

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

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

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

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

在 vue2 中，我們給對(duì)象新增一個(gè)屬性時(shí)，如果新增屬性的值發(fā)生改變的時(shí)候，我們發(fā)現(xiàn)視圖并沒有更新，因?yàn)樾略鰧傩允菬o法監(jiān)聽到的。同樣的，通過下標(biāo)直接改變數(shù)組，視圖也是無法更新的，也是因?yàn)楸O(jiān)聽不到。

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

五、更好的 ts 支持

vue2 不適合使用 ts，在于它的 Options API 風(fēng)格。

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

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

六、更先進(jìn)的組件

1> Fragment

在 vue2 中，每個(gè)模板必須有一個(gè)根節(jié)點(diǎn)，否則就會(huì)報(bào)錯(cuò)。

vue3 中可以不需要根節(jié)點(diǎn)，多個(gè)元素或標(biāo)簽可并列存在。

2> Teleport

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

3> Supense

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

總結(jié)：

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

總之 vue3 就是:

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