這篇文章主要為大家展示了“如何使用Vue2代碼改成Vue3”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用Vue2代碼改成Vue3”這篇文章吧。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、做網(wǎng)站、倉(cāng)山網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、倉(cāng)山網(wǎng)絡(luò)營(yíng)銷、倉(cāng)山企業(yè)策劃、倉(cāng)山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供倉(cāng)山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：chinadenli.net

Vue3已經(jīng)出來(lái)有一段時(shí)間了，很多朋友早已熟讀了文檔，寫了好幾個(gè)Demo，饞Composition API等新特性已久了。無(wú)奈，在實(shí)際工作中，大部分朋友還是不得不守著成千上萬(wàn)行的Vue2老項(xiàng)目過(guò)日子，做一次框架升級(jí)就像給老房子裝修——念頭總是充沛，決心總是匱乏。

其實(shí)Vue團(tuán)隊(duì)已經(jīng)盡可能地減少了破壞性更新，還提供了一份細(xì)致的遷移指南，條數(shù)不少，但定睛一看，大部分都是體力活，有些很簡(jiǎn)單，比如異步組件要多包上一層：

遷移指南的地址：https://v3.cn.vuejs.org/guide/migration/array-refs.html

還有一些就改起來(lái)有點(diǎn)麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細(xì)微變化：

看到這種變化后，作為厭惡重復(fù)的程序員，已經(jīng)開始盤算著能不能寫個(gè)代碼幫我們把這些規(guī)則批量給改好了，當(dāng)然，寫轉(zhuǎn)換代碼的代碼要比寫網(wǎng)頁(yè)難上不少，還好我們之前已經(jīng)有了一個(gè)趁手的工具：GoGoCode的地址https://github.com/thx/gogocode

于是我們梳理了遷移指南里提到的，附帶上vue-router \ vuex升級(jí)的一些API變化，配合GoGoCode書寫了近30條轉(zhuǎn)換邏輯，涵蓋了Vue2到Vue3代碼break change的大部分場(chǎng)景，這個(gè)程序可以幫助你一鍵把Vue2的代碼轉(zhuǎn)換成Vue3的代碼。

遷移指南的地址：https://v3.cn.vuejs.org/guide/migration/array-refs.html

上面提到的兩條Vue2到Vue3的差異對(duì)比中，右側(cè)Vue3的代碼就是通過(guò)這個(gè)工具根據(jù)左側(cè)Vue2代碼原片直出的，效果還不錯(cuò)吧 ^_^，我們來(lái)一起試一下！

嘗試一下

全局安裝gogocode-cli

npm install gogocode-cli -g

在終端（terminal）中跳轉(zhuǎn)到需要升級(jí)的Vue項(xiàng)目路徑。如果需要升級(jí)src路徑下的Vue代碼，執(zhí)行如下命令

gogocode -s ./src -t gogocode-plugin-vue -o ./src-out

轉(zhuǎn)換操作執(zhí)行完畢后新的Vue3代碼會(huì)被寫入到src-out目錄中

我們拿Vue2的官方示例項(xiàng)目vue-hackernews-2.0試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎(chǔ)上只要稍作改動(dòng)再改一下構(gòu)建流程就能跑起來(lái)了，一些轉(zhuǎn)換的Diff如下：（查看完整Diff）

Vue2 的官方示例項(xiàng)目 vue-hackernews-2.0地址：https://github.com/vuejs/vue-hackernews-2.0

查看完整Diff地址：https://github.com/thx/gogocode/commit/6506a0e693aff1896da6c8863fa7e7c72d89610f?branch=6506a0e693aff1896da6c8863fa7e7c72d89610f&diff=split

這里只是簡(jiǎn)單地介紹，完整的方案請(qǐng)參考：https://gogocode.io/zh/docs/specification/vue2-to-vue3

實(shí)現(xiàn)比預(yù)想的要簡(jiǎn)單很多

為了達(dá)成轉(zhuǎn)換目的，GoGoCode新增支持了對(duì)。vue文件的解析，我們可以輕松地獲取到解析好的template和scirpt AST節(jié)點(diǎn)，并利用 GoGoCode方便的API進(jìn)行處理。

一些簡(jiǎn)單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進(jìn)行類似字符串的替換即可，由于是基于AST的，所以無(wú)需關(guān)心代碼格式，工作量是很小的：

script
  .replace('() => import($_$)', 'Vue.defineAsyncComponent(() => import($_$))')
  .replace(
    `
      () => ({
        component: import($_$1),
        $$$
      })`,
    `
    Vue.defineAsyncComponent({
      loader: () => import($_$1),
      $$$
    })
      `
  );

這次項(xiàng)目也檢驗(yàn)了GoGoCode對(duì)復(fù)雜情況的處理，就像前面提到的自定義指令生命周期的變化，也很輕松地做到！

以上是“如何使用Vue2代碼改成Vue3”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：如何使用Vue2代碼改成Vue3
文章位置：http://chinadenli.net/article12/iegdgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站營(yíng)銷、全網(wǎng)營(yíng)銷推廣、網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)