本文由葡萄城技術團隊原創並首發
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
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中。
如果是定義的全域性過濾器只能刪了，定一個共享的方法引用使用了。
以上是部分功能重構的方法，更詳細的資訊在官網已列出https://vue3js.cn/docs/guide/migration/introduction.html#breaking。
以上只是Vue官方元件的一些升級，如果專案中使用第三方元件，升級時也要注意元件是否支援3.0。目前建議穩定的專案不要急於升級到3.0，Vue 2後續還會有長期的維護並且提供2.7版本，官方後續也會提供相容的方案。如果是新專案或者實驗性的專案，可以升級Vue 3.0，開始享受新特性。