建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了如何將React 組件轉(zhuǎn)換成Vue 組件，此處通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值，需要的朋友可以參考下：
vue是什么軟件
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。
盤(pán)點(diǎn)兩個(gè)框架的組件共性
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)
| 框架 | 說(shuō)明 |
|---|---|
| React | 在初始化的時(shí)候，通過(guò)this.state = {xxx}來(lái)設(shè)置 |
| Vue | 通過(guò)data 返回函數(shù)來(lái)設(shè)置值，不同于react的state，vue是響應(yīng)式 |
3. 生命周期
雖然生命周期名不一樣，但是差不多有對(duì)應(yīng)的
4. 處理事件
| 框架 | 說(shuō)明 |
|---|---|
| React | 相應(yīng)的事件都加到了組件的實(shí)例方法上 |
| Vue | 設(shè)計(jì)上比較好，處理事件都加在一個(gè)methods對(duì)象下面，方便查找,更直觀 |
// react
class FrontendMagazine {
clickme () {
// xxxx
}
}
// vue
{
name: 'frontend-magazine',
methods: {
clickme () {
// xxx
}
}
}5. 組件錯(cuò)誤捕獲
| 框架 | 說(shuō)明 |
|---|---|
| React | componentDidCatch |
| Vue | errorCaptured |
6. jsx語(yǔ)法
react是基于jsx來(lái)寫(xiě)的，對(duì)于vue來(lái)說(shuō)，雖然在好多場(chǎng)景下，可以使用template來(lái)寫(xiě)，但是vue也完全支持jsx語(yǔ)法的，對(duì)于本工具，也只是把react的jsx語(yǔ)法轉(zhuǎn)換成vue支持的jsx
兩個(gè)框架不兼容的地方
react在最新版本里面，有flagments的支持，允許根節(jié)點(diǎn)返回多個(gè)節(jié)點(diǎn)，目前沒(méi)有看到vue支持的，還有就是在設(shè)計(jì)react組件的時(shí)候，使用了高階，對(duì)于本工具，也是不支持的
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
原理步驟
對(duì)于輸入的文件首先使用babylon來(lái)解析，生成ast
如果文件是typescript，會(huì)去掉相應(yīng)的ts描述
對(duì)ast進(jìn)行遍歷，首先提取propTypes和defaultProps
根據(jù)組件類(lèi)型，處理函數(shù)組件和類(lèi)組件
在類(lèi)組件里面，需要轉(zhuǎn)換生命周期，state等信息
最后根據(jù)提取到的信息拼接成vue組件，通過(guò)prettier-eslint來(lái)美化
轉(zhuǎn)化前后對(duì)比
如何同時(shí)寫(xiě)開(kāi)源的react和vue組件
如果你的組件想要被大家開(kāi)源使用，作者這里有一個(gè)小提議，可以邊寫(xiě)react組件，邊試著轉(zhuǎn)化成vue組件，如果轉(zhuǎn)化有問(wèn)題，試著改代碼，盡可能跨框架支持，這樣你寫(xiě)的組件肯定可以在react和vue項(xiàng)目中同時(shí)使用。
到此這篇關(guān)于如何將React 組件轉(zhuǎn)換成Vue 組件的文章就介紹到這了,更多相關(guān)如何將React 組件轉(zhuǎn)換成Vue 組件的內(nèi)容請(qǐng)搜索創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
名稱(chēng)欄目：如何將React組件轉(zhuǎn)換成Vue組件-創(chuàng)新互聯(lián)
URL標(biāo)題：http://fisionsoft.com.cn/article/dsehsp.html
