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