Vue 3升級指南,升級沒那么難
Vue 3的發布指日可待,我們可以期待一個更快,更小巧,更易于維護的版本,其中包含許多令人興奮的新功能。這些通常是對現有API的補充和改進。
沒有什么可以阻止你使用Vue 3啟動新應用程序的。在本文中,我將向你展示如何領先一步,并通過升級應用程序來開始嘗試新API。如果你對升級后的應用程序感興趣,請看一下我的TodoMVC應用程序,它是用Composition API編寫的。
TodoMVC:https://github.com/blacksonic/todomvc-vue-composition-api
使用CLI
我強烈建議對Vue項目使用正式的CLI。除了開發和部署工具外,它將升級簡化為單行命令:
- vue add vue-next
Vue Next plugin不僅可以升級和安裝新的依賴項,還可以修改代碼以使其與第三版兼容。
依賴
安裝插件會將軟件包 vue、vuex、vue-router、eslint-plugin-vue 和 @vue/test-utils 升級到下一個主要版本。此外,在開發依賴項中還會出現一個名為 @vue/compiler-sfc 的新軟件包。到底有什么好處呢?它將新的Vue單個文件組件編譯為可運行的Javascript代碼。
代碼修改
讓我們來看看代碼中都有哪些變化。首先大家注意到的是,主Vue包中不再有默認的導出。

命名的 export createApp 創建一個新的Vue應用程序,就像Vue 2中的構造函數一樣。插件設置將使用 use 方法(而不是構造函數的參數)移至應用程序實例。$mount 方法會丟失其美元符號,但其行為方式相同。

插件采用了工廠模式:不再使用帶有 new 關鍵字的構造函數。無需調用新的 Vuex.Store,而是需要createStore 工廠方法。不再可能將store的默認導出作為插件傳遞。
路由插件遵循相同的模式:new VueRouter 變成調用 createRouter ,并且必須保留全局插件設置。在新版本中,你始終必須定義歷史記錄的類型。你可以從 createWebHashHistory,createMemoryHistory 和createWebHistory 中選擇。
基本上就是這樣,可以啟動應用程序并在新的Vue版本上運行。只需一個bash命令即可完成所有操作。其他的東西應該都可以用舊的語法來工作,因為舊的API仍然是完整的。
大小規模
如果檢查build命令的輸出大小,你會注意到略有下降:43.75 KiB-> 40.57 KiB。這是因為將默認Vue實例保留為命名導出的結果。諸如Webpack和Rollup之類的構建工具可以對命名的導出進行tree-shaking(刪除未使用的代碼),但對默認的導出則不能。
如果沒有CLI
如果沒有CLI,則必須將 vue-loader 或 rollup-plugin-vue 升級到下一個主要版本,并添加 @vue/compiler-sfc 軟件包。這里不再有魔法了,你必須手動完成所有操作。你還必須手動進行代碼修改,這里沒有搜索代碼庫和更新語法的工具。
在線體驗
如果你不想修改你的項目,但對嘗試使用新版本感興趣,只需嘗試此在線體驗。
在線體驗:https://codesandbox.io/s/github/blacksonic/todomvc-vue-composition-api/tree/master/?from-embed
結束
我們已經到了升級過程中必須做的修改的終點。這些修改是由Vue CLI自動完成的。你現在要做的就是開始嘗試使用Vue 3提供的所有新功能:新的響應式系統、Composition API、Fragments、Teleport和Suspense。