建站
咨詢
售后
建站咨詢
新聞中心
Vue 3的發(fā)布指日可待，我們可以期待一個更快，更小巧，更易于維護的版本，其中包含許多令人興奮的新功能。這些通常是對現(xiàn)有API的補充和改進。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供南岳企業(yè)網(wǎng)站建設,專注與網(wǎng)站設計、成都做網(wǎng)站、H5場景定制、小程序制作等業(yè)務。10年已為南岳眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。
沒有什么可以阻止你使用Vue 3啟動新應用程序的。在本文中，我將向你展示如何領先一步，并通過升級應用程序來開始嘗試新API。如果你對升級后的應用程序感興趣，請看一下我的TodoMVC應用程序，它是用Composition API編寫的。
TodoMVC：https://github.com/blacksonic/todomvc-vue-composition-api
使用CLI
我強烈建議對Vue項目使用正式的CLI。除了開發(fā)和部署工具外，它將升級簡化為單行命令：
- vue add vue-next
Vue Next plugin不僅可以升級和安裝新的依賴項，還可以修改代碼以使其與第三版兼容。
依賴
安裝插件會將軟件包 vue、vuex、vue-router、eslint-plugin-vue 和 @vue/test-utils 升級到下一個主要版本。此外，在開發(fā)依賴項中還會出現(xiàn)一個名為 @vue/compiler-sfc 的新軟件包。到底有什么好處呢?它將新的Vue單個文件組件編譯為可運行的Javascript代碼。
代碼修改
讓我們來看看代碼中都有哪些變化。首先大家注意到的是，主Vue包中不再有默認的導出。
命名的 export createApp 創(chuàng)建一個新的Vue應用程序，就像Vue 2中的構(gòu)造函數(shù)一樣。插件設置將使用 use 方法(而不是構(gòu)造函數(shù)的參數(shù))移至應用程序?qū)嵗?mount 方法會丟失其美元符號，但其行為方式相同。
插件采用了工廠模式：不再使用帶有 new 關鍵字的構(gòu)造函數(shù)。無需調(diào)用新的 Vuex.Store，而是需要createStore 工廠方法。不再可能將store的默認導出作為插件傳遞。
路由插件遵循相同的模式：new VueRouter 變成調(diào)用 createRouter ，并且必須保留全局插件設置。在新版本中，你始終必須定義歷史記錄的類型。你可以從 createWebHashHistory，createMemoryHistory 和createWebHistory 中選擇。
基本上就是這樣，可以啟動應用程序并在新的Vue版本上運行。只需一個bash命令即可完成所有操作。其他的東西應該都可以用舊的語法來工作，因為舊的API仍然是完整的。
大小規(guī)模
如果檢查build命令的輸出大小，你會注意到略有下降：43.75 KiB-> 40.57 KiB。這是因為將默認Vue實例保留為命名導出的結(jié)果。諸如Webpack和Rollup之類的構(gòu)建工具可以對命名的導出進行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
結(jié)束
我們已經(jīng)到了升級過程中必須做的修改的終點。這些修改是由Vue CLI自動完成的。你現(xiàn)在要做的就是開始嘗試使用Vue 3提供的所有新功能：新的響應式系統(tǒng)、Composition API、Fragments、Teleport和Suspense。
網(wǎng)頁標題：Vue 3升級指南，升級沒那么難
當前地址：http://m.5511xx.com/article/ccddddd.html
