阿里發(fā)布新工具，直接幫你改代碼！網(wǎng)友：工作量又減輕了～
[導(dǎo)讀]來(lái)自：掘金，作者：阿里媽媽前端快爆鏈接：https://juejin.cn/post/6977259197566517284Vue3已經(jīng)出來(lái)有一段時(shí)間了，很多朋友早已熟讀了文檔，寫(xiě)了好幾個(gè)Demo，饞CompositionAPI等新特性已久了。無(wú)奈，在實(shí)際工作中，大部分朋友還是不...
來(lái)自：掘金，作者：阿里媽媽前端快爆鏈接：https://juejin.cn/post/6977259197566517284Vue3 已經(jīng)出來(lái)有一段時(shí)間了，很多朋友早已熟讀了文檔，寫(xiě)了好幾個(gè) Demo，饞 Composition API 等新特性已久了。無(wú)奈，在實(shí)際工作中，大部分朋友還是不得不守著成千上萬(wàn)行的 Vue2 老項(xiàng)目過(guò)日子，做一次框架升級(jí)就像給老房子裝修——念頭總是充沛，決心總是匱乏。其實(shí) Vue 團(tuán)隊(duì)已經(jīng)盡可能地減少了破壞性更新，還提供了一份細(xì)致的遷移指南[1]，條數(shù)不少，但定睛一看，大部分都是體力活，有些很簡(jiǎn)單，比如異步組件要多包上一層：
還有一些就改起來(lái)有點(diǎn)麻煩，比如自定義指令生命周期的更名，和傳入?yún)?shù)的一些細(xì)微變化：嘗試一下
全局安裝 gogocode-clinpm?install?gogocode-cli?-g
復(fù)制代碼
在終端（terminal）中跳轉(zhuǎn)到需要升級(jí)的 Vue 項(xiàng)目路徑。如果需要升級(jí) src 路徑下的 Vue 代碼，執(zhí)行如下命令gogocode?-s?./src?-t?gogocode-plugin-vue?-o?./src-out
復(fù)制代碼
轉(zhuǎn)換操作執(zhí)行完畢后新的 Vue3 代碼會(huì)被寫(xiě)入到 src-out 目錄中我們拿 Vue2 的官方示例項(xiàng)目?vue-hackernews-2.0[6]?試了一下，發(fā)現(xiàn)在轉(zhuǎn)換的基礎(chǔ)上只要稍作改動(dòng)再改一下構(gòu)建流程就能跑起來(lái)了，一些轉(zhuǎn)換的 Diff 如下：（查看完整 Diff[7]）實(shí)現(xiàn)比預(yù)想的要簡(jiǎn)單很多
為了達(dá)成轉(zhuǎn)換目的，GoGoCode[9]?新增支持了對(duì) .vue 文件的解析，我們可以輕松地獲取到解析好的 template 和 scirpt AST節(jié)點(diǎn)，并利用 GoGoCode 方便的 API 進(jìn)行處理。一些簡(jiǎn)單的規(guī)則，比如前面介紹的異步組件轉(zhuǎn)換直接進(jìn)行類(lèi)似字符串的替換即可，由于是基于 AST 的，所以無(wú)需關(guān)心代碼格式，工作量是很小的：script
??.replace('()?=>?import($_$)',?'Vue.defineAsyncComponent(()?=>?import($_$))')
??.replace(
????`
??????()?=>?({
????????component:?import($_$1),
????????$$$
??????})`,
????`
????Vue.defineAsyncComponent({
??????loader:?()?=>?import($_$1),
??????$$$
????})
??????`
??);
復(fù)制代碼
這次項(xiàng)目也檢驗(yàn)了 GoGoCode 對(duì)復(fù)雜情況的處理，就像前面提到的自定義指令生命周期的變化，也很輕松地做到！開(kāi)源了，希望能得到大家的反饋
吃水不忘挖井人，希望這些工作能為 Vue 開(kāi)源社區(qū)做些貢獻(xiàn)，讓社區(qū)盡快享受到Vue3帶來(lái)的技術(shù)紅利，也讓Vue團(tuán)隊(duì)的成員能夠拜托 Vue2 的歷史包袱，更加聚焦于Vue3新特性的研發(fā)！項(xiàng)目伊始，存在的不足之處希望得到大家的反饋和幫助：issues:?github.com/thx/gogocod…[10]釘釘群：34266233最后：求 star 支持！Github：github.com/thx/gogocod…[11]（本項(xiàng)目在 packages/gogocode-plugin-vue/ 目錄下）官網(wǎng)：gogocode.io[12]附錄：當(dāng)前轉(zhuǎn)換規(guī)則覆蓋
| 規(guī)則 | 轉(zhuǎn)換支持 | 文檔 |
|---|---|---|
| v-for 中的 Ref 數(shù)組 | ? | 鏈接[13] |
| 異步組件 | ? | 鏈接[14] |
| attribute 強(qiáng)制行為 | ? | 鏈接[15] |
| $attrs包含class
本站聲明： 本文章由作者或相關(guān)機(jī)構(gòu)授權(quán)發(fā)布，目的在于傳遞更多信息，并不代表本站贊同其觀點(diǎn)，本站亦不保證或承諾內(nèi)容真實(shí)性等。需要轉(zhuǎn)載請(qǐng)聯(lián)系該專(zhuān)欄作者，如若文章內(nèi)容侵犯您的權(quán)益，請(qǐng)及時(shí)聯(lián)系本站刪除（ 郵箱：macysun@21ic.com ）。
換一批
延伸閱讀
美國(guó)舊金山和中國(guó)蘇州2026年2月8日 /美通社/ -- 信達(dá)生物制藥集團(tuán)（香港聯(lián)交所股票代碼：01801），一家致力于研發(fā)、生產(chǎn)和銷(xiāo)售腫瘤、自身免疫、代謝、眼科等重大疾病領(lǐng)域創(chuàng)新藥物的生物制藥公司，宣布與禮來(lái)制藥達(dá)成戰(zhàn)... 關(guān)鍵字： COM 代碼 創(chuàng)始人 控制香港2025年12月11日 /美通社/ -- 諾亞控股有限公司（Noah Holdings Limited，以下簡(jiǎn)稱(chēng)"諾亞"或"公司"，紐交所代碼：NOAH，港交所代碼：6686）... 關(guān)鍵字： AI 代碼 AN 操作系統(tǒng)弗吉尼亞州阿什本2025年12月10日 /美通社/ -- 企業(yè)技術(shù)與創(chuàng)新領(lǐng)域的領(lǐng)先合作伙伴DXC Technology（紐約證券交易所代碼：DXC）今日宣布推出AdvisoryX，這是一支旨在幫助企業(yè)應(yīng)對(duì)最復(fù)雜的戰(zhàn)略、運(yùn)... 關(guān)鍵字： ADVISOR AI TECHNOLOGY 代碼新加坡2025年12月8日 /美通社/ -- 近日，51Talk在線(xiàn)教育集團(tuán)（"51Talk"或"公司"）（紐約證券交易所美國(guó)股票代碼：COE）公布了其截至2025年9月... 關(guān)鍵字： BSP 代碼 創(chuàng)始人 新加坡
本站介紹 | 申請(qǐng)友情鏈接 | 歡迎投稿 | 隱私聲明 | 廣告業(yè)務(wù) | 網(wǎng)站地圖 | 聯(lián)系我們 | 誠(chéng)聘英才 ICP許可證號(hào)：京ICP證070360號(hào) 21ic電子網(wǎng) 2000- 版權(quán)所有 用戶(hù)舉報(bào)窗口（ 郵箱：macysun@21ic.com ） |
下載文檔
