Vue 3升級指南，升級沒那么難
Vue 3的發(fā)布指日可待，我們可以期待一個更快，更小巧，更易于維護(hù)的版本，其中包含許多令人興奮的新功能。這些通常是對現(xiàn)有API的補(bǔ)充和改進(jìn)。
沒有什么可以阻止你使用Vue 3啟動新應(yīng)用程序的。在本文中，我將向你展示如何領(lǐng)先一步，并通過升級應(yīng)用程序來開始嘗試新API。如果你對升級后的應(yīng)用程序感興趣，請看一下我的TodoMVC應(yīng)用程序，它是用Composition API編寫的。
TodoMVC：https://github.com/blacksonic/todomvc-vue-composition-api
使用CLI
我強(qiáng)烈建議對Vue項(xiàng)目使用正式的CLI。除了開發(fā)和部署工具外，它將升級簡化為單行命令：
- vue add vue-next
Vue Next plugin不僅可以升級和安裝新的依賴項(xiàng)，還可以修改代碼以使其與第三版兼容。
依賴
安裝插件會將軟件包 vue、vuex、vue-router、eslint-plugin-vue 和 @vue/test-utils 升級到下一個主要版本。此外，在開發(fā)依賴項(xiàng)中還會出現(xiàn)一個名為 @vue/compiler-sfc 的新軟件包。到底有什么好處呢?它將新的Vue單個文件組件編譯為可運(yùn)行的Javascript代碼。
代碼修改
讓我們來看看代碼中都有哪些變化。首先大家注意到的是，主Vue包中不再有默認(rèn)的導(dǎo)出。
命名的 export createApp 創(chuàng)建一個新的Vue應(yīng)用程序，就像Vue 2中的構(gòu)造函數(shù)一樣。插件設(shè)置將使用 use 方法(而不是構(gòu)造函數(shù)的參數(shù))移至應(yīng)用程序?qū)嵗?mount 方法會丟失其美元符號，但其行為方式相同。
插件采用了工廠模式：不再使用帶有 new 關(guān)鍵字的構(gòu)造函數(shù)。無需調(diào)用新的 Vuex.Store，而是需要createStore 工廠方法。不再可能將store的默認(rèn)導(dǎo)出作為插件傳遞。
路由插件遵循相同的模式：new VueRouter 變成調(diào)用 createRouter ，并且必須保留全局插件設(shè)置。在新版本中，你始終必須定義歷史記錄的類型。你可以從 createWebHashHistory，createMemoryHistory 和createWebHistory 中選擇。
基本上就是這樣，可以啟動應(yīng)用程序并在新的Vue版本上運(yùn)行。只需一個bash命令即可完成所有操作。其他的東西應(yīng)該都可以用舊的語法來工作，因?yàn)榕f的API仍然是完整的。
大小規(guī)模
如果檢查build命令的輸出大小，你會注意到略有下降：43.75 KiB-> 40.57 KiB。這是因?yàn)閷⒛J(rèn)Vue實(shí)例保留為命名導(dǎo)出的結(jié)果。諸如Webpack和Rollup之類的構(gòu)建工具可以對命名的導(dǎo)出進(jìn)行tree-shaking(刪除未使用的代碼)，但對默認(rèn)的導(dǎo)出則不能。
如果沒有CLI
如果沒有CLI，則必須將 vue-loader 或 rollup-plugin-vue 升級到下一個主要版本，并添加 @vue/compiler-sfc 軟件包。這里不再有魔法了，你必須手動完成所有操作。你還必須手動進(jìn)行代碼修改，這里沒有搜索代碼庫和更新語法的工具。
在線體驗(yàn)
如果你不想修改你的項(xiàng)目，但對嘗試使用新版本感興趣，只需嘗試此在線體驗(yàn)。
在線體驗(yàn)：https://codesandbox.io/s/github/blacksonic/todomvc-vue-composition-api/tree/master/?from-embed
結(jié)束
我們已經(jīng)到了升級過程中必須做的修改的終點(diǎn)。這些修改是由Vue CLI自動完成的。你現(xiàn)在要做的就是開始嘗試使用Vue 3提供的所有新功能：新的響應(yīng)式系統(tǒng)、Composition API、Fragments、Teleport和Suspense。
