Vue 3.0 升級指南
- 2020 年 11 月 27 日
- 筆記
- javascript
本文由葡萄城技術團隊原創並首發
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
2020年9月18日Vue 3.0正式發布，距離2016年10月1日Vue 2.0發布已經過去了4年。不知道發布日期的選擇是否是作者尤大有意為之，在這四年間，Vue作為個人項目取得了巨大成功，github上的 star數迅速超過10W，成為了三大前端流行框架之一，而在中國它更是作為前端初學者入門的首選佔據著霸主地位。
眾所周知，軟體開發過程里的重構就像是鳳凰浴火，浴火直至永生。2018年2月尤大就有了重構Vue，並於同年九月建立了原型的同時也創建了vue-next的repo，而後正式宣布Vue 3.0項目的啟動。隨後確定了早期實現的方式（class, TypeScript, hooks, time slicing）以及建立了RFC（Request for Comments，徵求意見）流程。
在Composition API 確定之前，團隊經歷了Class API 和 Function API的討論，功能的回退。團隊始終希望保持Vue平緩的學習曲線，以及與用戶一起成長的態度，Vue 3.0開發並不激進。在2019年8月確定了 Composition API RFC，隨後關於3.0周邊的開發也加快了步伐，並與2020年1月2日發布了alpha版本，7月17日第一個RC版，9月18日正式版「One Piece」發布。Vue 3.0 歷時2年，37個RFC，2682次Commits，共有99位貢獻者參與其中。
Vue 3.0 帶來了以下主要新特性
- 更易維護
- TypeScript + 內部模組化
- 更快
- 通過Proxy實現響應
- 新的虛擬Dom實現
- 更小
- 引入Tree-sharking（搖樹）機制
- 更好的程式碼組織結構
- Composition API
關於新特性，有興趣可以參考之前我們發布的《還學的動嗎？ 盤點下Vue.js 3.0.0 那些讓人激動的功能》去詳細了解。而在這篇文章中，我們一起看下如何升級現有項目來享受這些新特性，讓我們現在就開始吧。
官方的vue-cli提供了升級命令，升級cli到最新版本，然後運行vue add vue-next 命令就可以將項目升級到3.0版本。這個命令除了升級和安裝新版本的依賴，還會調整程式碼以適應新的版本。
以下是升級前後main.js的對比，Vue 3.0中使用createApp代替了2.0中使用的Vue構造函數，使用到的插件也是通過use的方式代替了2中的構造函數參數。
Router 採用createRouter代替VueRouter構造函數
Vuex也採用了createStore的方式替代Store構造函數
看起來升級比較簡單，但是Vue 3.0還是有很多breaking changes，一些常用功能的小建議：
- v-model
Vue 3.0中支援了多v-model的綁定，同時也支援自定義v-model修飾符。
但是v-model 也帶來了兩個breaking changes。
-
- 自定義組件中屬性（prop）和事件（event）默認名稱發生了變化
- .sync修飾符被移除，model 組件被替換為v-model的一個參數
- Event Bus
在項目實際使用中，會遇到多組件間通訊的問題，例如兄弟組件間的通訊，使用eventBus的方式，很方便可以實現這樣的訂閱者模式。
通過初始化一個新的Vue對象，使用vue 的$emit和$on方法來發送監聽時間。
其中一個組件發送消息
在其他組件中就可以監聽這個通知
eventBus 的方式很簡單，但是並不優雅，並且在Vue 3.0中無法使用了。
升級3.0後官方推薦使用更為簡單的mitt 來構建event Bus，或者直接使用Vuex來實現資訊的共享。
- Filter
在Vue 2中可以使用Filter來格式化值，例如將msg首字母大寫
在Vue 3.0中棄用了Filter，可以直接使用函數傳參的方式來實現這個需求
可以將capitalize 方法放在methods中，也可以放在Composition API的setup中。
如果是定義的全局過濾器只能刪了，定一個共享的方法引用使用了。
以上是部分功能重構的方法，更詳細的資訊在官網已列出//vue3js.cn/docs/guide/migration/introduction.html#breaking。
以上只是Vue官方組件的一些升級，如果項目中使用第三方組件，升級時也要注意組件是否支援3.0。目前建議穩定的項目不要急於升級到3.0，Vue 2後續還會有長期的維護並且提供2.7版本，官方後續也會提供兼容的方案。如果是新項目或者實驗性的項目，可以升級Vue 3.0，開始享受新特性。
