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中。 

 

 

如果是定義的全局過濾器只能刪了,定一個共享的方法引用使用了。

以上是部分功能重構的方法,更詳細的信息在官網已列出//vue3js.cn/docs/guide/migration/introduction.html#breaking

以上只是Vue官方組件的一些升級,如果項目中使用第三方組件,升級時也要注意組件是否支持3.0。目前建議穩定的項目不要急於升級到3.0,Vue 2後續還會有長期的維護並且提供2.7版本,官方後續也會提供兼容的方案。如果是新項目或者實驗性的項目,可以升級Vue 3.0,開始享受新特性。