這篇文章主要介紹了如何將React 組件轉(zhuǎn)換成Vue 組件，此處通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考價值，需要的朋友可以參考下：

目前成都創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、博白網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

盤點兩個框架的組件共性

1. props

// react
FrontendMagazine.propTypes = {
  name: PropTypes.string
}
FrontendMagazine.defaultProps = {
  name: 'FrontendMagazine'
}
// vue
{
  name: 'frontend-magazine',
  props: {
    name: {
      type: String,
      default: 'FrontendMagazine'
    }
  }
}

2. 組件自有狀態(tài)

框架	說明
React	在初始化的時候，通過this.state = {xxx}來設(shè)置
Vue	通過data 返回函數(shù)來設(shè)置值，不同于react的state，vue是響應(yīng)式

3. 生命周期

雖然生命周期名不一樣，但是差不多有對應(yīng)的

4. 處理事件

框架	說明
React	相應(yīng)的事件都加到了組件的實例方法上
Vue	設(shè)計上比較好，處理事件都加在一個methods對象下面，方便查找,更直觀

// react
class FrontendMagazine {
  clickme () {
    // xxxx
  }
}
// vue
{
  name: 'frontend-magazine',
  methods: {
    clickme () {
      // xxx
    }
  }
}

5. 組件錯誤捕獲

框架	說明
React	componentDidCatch
Vue	errorCaptured

6. jsx語法

react是基于jsx來寫的，對于vue來說，雖然在好多場景下，可以使用template來寫，但是vue也完全支持jsx語法的，對于本工具，也只是把react的jsx語法轉(zhuǎn)換成vue支持的jsx

兩個框架不兼容的地方

react在最新版本里面，有flagments的支持，允許根節(jié)點返回多個節(jié)點，目前沒有看到vue支持的，還有就是在設(shè)計react組件的時候，使用了高階，對于本工具，也是不支持的

react-to-vue工具

安裝及使用

# install
npm install -g react-to-vue
# usage
Usage: rtv [options] file(react component)

Options:

 -V, --version     output the version number
 -o --output [string] the output file name
 -t --ts        it is a typescript component
 -h, --help      output usage information

 # demo

 rtv demo.js

原理步驟

1. 對于輸入的文件首先使用babylon來解析，生成ast

2. 如果文件是typescript，會去掉相應(yīng)的ts描述

3. 對ast進(jìn)行遍歷，首先提取propTypes和defaultProps

4. 根據(jù)組件類型，處理函數(shù)組件和類組件

5. 在類組件里面，需要轉(zhuǎn)換生命周期，state等信息

6. 最后根據(jù)提取到的信息拼接成vue組件，通過prettier-eslint來美化

轉(zhuǎn)化前后對比

 

如何同時寫開源的react和vue組件

如果你的組件想要被大家開源使用，作者這里有一個小提議，可以邊寫react組件，邊試著轉(zhuǎn)化成vue組件，如果轉(zhuǎn)化有問題，試著改代碼，盡可能跨框架支持，這樣你寫的組件肯定可以在react和vue項目中同時使用。

到此這篇關(guān)于如何將React 組件轉(zhuǎn)換成Vue 組件的文章就介紹到這了,更多相關(guān)如何將React 組件轉(zhuǎn)換成Vue 組件的內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！

當(dāng)前題目：如何將React組件轉(zhuǎn)換成Vue組件
URL鏈接：http://www.rwnh.cn/article48/psgsep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、自適應(yīng)網(wǎng)站、用戶體驗、網(wǎng)站營銷、軟件開發(fā)、網(wǎng)站排名

廣告

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