之前寫的關於 vue3 的文章，好多人吐槽：這些API每次使用都要引入一遍，感覺有點麻煩。
今天我們就來看看 vue3 相比 vue2 的優點有些啥？
為啥有些人說：自從寫了 ts vue3 再也回不到 vue2 啦！
vue3 到底哪里好？有的人回不到 vue2，而有的人去不了vue3！喜歡的點贊收藏，復盤不迷路！
一、Vue3 新增的幾個亮點：
- Performance：性能優化
- Tree-shaking ：支持搖樹優化
- Composition API ：組合式api
- 新增組件：Fragment、Teleport、Supense
- 更好地支持 ts
- Custom Render API：自定義渲染器
二、性能方面的提升
在性能方面，vue3 相比 vue2 ，性能提升了 1.3 ~ 2 倍左右。我們就來看看它是在哪些方面，如何提升的？
2.1、響應式性能提升
1> diff方法優化
diff 算法是虛擬 DOM 技術的必然產物，它會對新舊 DOM 進行比較，然后將變化的 DOM 更新在真實的 DOM 上。
在 vue2 中，數據發生變化的時候，會生成一個新的 DOM 樹，然后和之前的 DOM 樹進行比較，找到不同的節點然后更新到真實的 DOM 上，比較的過程中，會對沒有發生改變的 DOM 也都會進行比較，就會消耗一定的時間。
在 vue3 中，在創建虛擬 DOM 的時候，會根據 DOM 中的內容添加一個靜態標記，在數據發生改變的時候，就會帶着靜態標記的節點去對比，能夠快速找到變化的 DOM 。
2> 事件偵聽器緩存
默認情況下onClick會被視為動態綁定，所以每次都會追蹤它的變化
但是因為是同一個函數，所以不用追蹤變化，直接緩存起來復用即可
3> ssr渲染
當存在大量靜態內容時，這些內容會被當做純字符串推進一個 buffer 內，即使存在動態綁定，也會通過模板插值潛入進去，這樣會比虛擬 DOM 渲染快得多。
2.2、代碼體積方面
打包大小減少41%。
vue3 移除了一些不常用的 API，如：inline-template、filter 等，使用 tree-shaking。
Tree Shaking 搖樹優化，指的就是當我們引入一個模塊的時候，不引入這個模塊的所有代碼，只引入我們需要的代碼。
在 vue2 中，很多函數都掛載到全局 Vue 對象上，如：nextTick、set 函數等，雖然我們不常用，但打包時只要引入 Vue 這些全局函數會打包進 bundle 中。而 vue3 中，引入tree-shaking，所有的 API 都通過 ES6 模塊化的方式引入，這樣就能夠讓 webpack 或 rollup 等打包工具在打包時，就會自動對沒有用到的 API 進行剔除，最小化 bundle 體積。
初次渲染快55%, 更新渲染快133%。組件選擇了按需引入，使得打包后的體積也更小了，所以項目運行的時候速度更快，更順暢了！
2.3、編譯被優化
1> 靜態提升
在 vue2 中，無論元素是否參與更新，每次都會重新創建然后再渲染。
vue3 使用靜態提升后，對於不參與更新的元素，只會被創建一次，在渲染時直接復用就好了。
2> Fragment
模板內不用再創建一個唯一根節點，可以直接放同級標簽和內容。就相當於少了一個節點嵌套渲染。
三、選項式 api VS 組合式 api
3.1、vue3 的組合式 api 相對來說，更有利於維護和封裝。
3.2、組合式 api 高內聚，低耦合。
在 vue2 中采用選項式 api ，會在 vue 文件的 data、methods、watch、computed 中定義屬性和方法，共同處理頁面邏輯，多個功能相互交叉，纏繞在一起，代碼過於分散。
而 vue3 新增了組合式 api ，一個功能模塊代碼會集中到一起，實現高內聚，低耦合。提高代碼的可讀性和可維護性，基於函數組合的 api 更好地重用邏輯代碼。
組合式api 與 選項式api 對比如下圖：
每個顏色，都代表着一個功能。
3.3、不宜出現 DOM 元素不存在問題。
vue3 中用 setup 函數代替了 vue2 中的 beforeCreate 和 created 。有些同學有時候會在 created 中操作 DOM 元素，有時候報錯了，就在那納悶看不出來問題，為了沒有反應。使用 setup 之后，就不容易出現該問題了。
注意：
vue3 的組合式 api 中的 onUnmounted 代替了 vue2 中的 beforeDestory。
vue3 的組合式 api unmounted 代替了 vue2 中的 destoryed 。
四、proxy 相對 Object.defineProperty 優點有哪些？
proxy 和 Object.defineProperty 都是來實現響應式數據的。
vue3 使用 proxy 來代替 vue2 的 Object.defineProperty 效率更高，值得學習。
1> vue2 利用 Object.defineProperty 來劫持 data 數據的 getter 和 setter 操作，使得 data 在被訪問或賦值時，動態更新綁定的 template 模板。而 Object.defineProperty 必須遍歷所有的預值才能劫持每一個屬性，這一缺點正好能夠被 proxy 解決。
proxy 相比 Object.defineProperty 優點分別為：
- 代碼的執行效果更快。
- proxy 可以直接監聽對象而不是它的屬性。
- proxy 可以直接監聽數組的每個元素的變化。
- proxy 不需要初始化的時候遍歷所有屬性，如果有多層嵌套的話，只訪問某個屬性的時候，proxy 能夠快速訪問到，而 Object.defineProperty 還需要遍歷所有屬性，然后逐級向下訪問。
- proxy 返回的是一個新對象，可以直接操作新對象而達到目標。而 Object.defineProperty 操作的是原對象，只能遍歷對象屬性然后對其直接修改。
- proxy 有 13 種攔截方法，不限於 apply、ownKeys、deleteProperty 等，而 Object.defineporperty 不具備。
2> defineProperty 無法監聽對象新增屬性以及無法跟蹤數組索引以及數組 length 的問題，proxy 正好解決了該問題。
在 vue2 中，我們給對象新增一個屬性時，如果新增屬性的值發生改變的時候，我們發現視圖並沒有更新，因為新增屬性是無法監聽到的。同樣的，通過下標直接改變數組，視圖也是無法更新的，也是因為監聽不到。
在 vue3 中新增 proxy ，解決了這些問題。
五、更好的 ts 支持
vue2 不適合使用 ts，在於它的 Options API 風格。
options 是一個簡單的對象，而 ts 是一種類型系統、面向對象的語法，兩個不匹配。
vue3 新增了 defineComponent 函數，使組件在 ts 下，更好的利用參數類型推斷。如：reactive 和 ref 很具有代表性。
六、更先進的組件
1> Fragment
在 vue2 中，每個模板必須有一個根節點，否則就會報錯。
vue3 中可以不需要根節點，多個元素或標簽可並列存在。
2> Teleport
傳送門。可以把 teleport 中的內容添加到任意的節點內，對於嵌套較深的組件來說絕對是一個福音。
3> Supense
允許程序在等待異步組件渲染一些后備的內容，可以讓我們創建一個平滑的用戶體驗。
總結：
vue 目前是國內最火的前端框架之一，vue3 性能提升、運行速度也比 vue2 好很多。
總之 vue3 就是:
- 讓項目更快
- 讓代碼更少
- 更易於維護
- 讓我們開發更快，加班更少