Vue 3.0 升級指南

本文由葡萄城技術團隊原創並首發

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

 

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，一些經常使用功能的小建議：

1. v-model

　　　　Vue 3.0中支持了多v-model的綁定，同時也支持自定義v-model修飾符。

　　　　可是v-model 也帶來了兩個breaking changes。

• • 自定義組件中屬性（prop）和事件（event）默認名稱發生了變化
  • .sync修飾符被移除，model 組件被替換爲v-model的一個參數

　　　　

　　　　

 

1. Event Bus

在項目實際使用中，會遇到多組件間通訊的問題，例如兄弟組件間的通訊，使用eventBus的方式，很方即可以實現這樣的訂閱者模式。

經過初始化一個新的Vue對象，使用vue 的$emit和$on方法來發送監聽時間。

其中一個組件發送消息

 

 

在其餘組件中就能夠監聽這個通知

 

eventBus 的方式很簡單，可是並不優雅，而且在Vue 3.0中沒法使用了。

升級3.0後官方推薦使用更爲簡單的mitt 來構建event Bus，或者直接使用Vuex來實現信息的共享。

1. 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，開始享受新特性。