K60至尊版剛預(yù)熱 一加Ace2 Pro正面硬剛
Redmi這邊剛?cè)缁鹑巛钡男麄髁薑60 Ultra的各種技術(shù)和硬件配置，作為競(jìng)品的一加也坐不住了。一加中國(guó)區(qū)總裁李杰發(fā)布了兩條微博，表示在自家的一加Ace2上早就已經(jīng)采用了和PixelWo
Veaury 是一個(gè)基于 React 和 Vue3 的工具庫(kù)，主要用于React和Vue在一個(gè)項(xiàng)目中公共使用的場(chǎng)景，主要運(yùn)用在項(xiàng)目遷移、技術(shù)棧融合的開發(fā)模式、跨技術(shù)棧使用第三方組件的場(chǎng)景。
Veaury的特點(diǎn)如下：
Veaury 的文檔寫的非常詳細(xì)，這里就不再詳細(xì)介紹其使用方式了。需要注意的是，Veaury 并不支持 Vue 2，如果需要使用Vue 2，可以使用下面要介紹的工具庫(kù)。
Github：https://github.com/devilwjp/veaury。
Vuera 是一個(gè)用于在 Vue 應(yīng)用中使用 React 組件的庫(kù)，同時(shí)也支持在 React 應(yīng)用中使用 Vue 組件。它提供了一種方便的方式，使開發(fā)人員能夠在不同的框架之間無(wú)縫地使用對(duì)方的組件。
要在 Vue 應(yīng)用中使用React組件，可以按照以下步驟使用Vuera。
安裝Vuera：使用npm或yarn在您的Vue項(xiàng)目中安裝Vuera庫(kù)。
// 使用 yarn 安裝yarn add vuera// 使用 npm 安裝npm i -S vuera安裝依賴。
由于需要在Vue中使用React組件，所以首先需要在項(xiàng)目中安裝 React，安裝指令如下：
npm install --save react react-dom在babel.config.js文件中添加以下配置即可：
{ "presets": [ "react" ], "plugins": [ "vuera/babel" ]}接下來(lái)在項(xiàng)目中以插件的形式來(lái)引入并使用vuera庫(kù)，可以在 main.js 中加入如下代碼：
import { VuePlugin } from 'vuera'Vue.use(VuePlugin)完成上述配置之后，就可以在Vue項(xiàng)目中引入并使用React組件了。
React組件代碼如下：
import React from 'react'function myReactComponent(props) { const { message } = props function childClickHandle() { props.onMyEvent('React子組件傳遞的數(shù)據(jù)') } return ( <div> <h2>{ message }</h2> <button onClick={ childClickHandle }>向Vue項(xiàng)目傳遞React子組件的數(shù)據(jù)</button> </div> )}export default myReactComponentVue組件代碼如下：
<template> <div> <h1>I'm a Vue component</h1> <my-react-component :message="message" @onMyEvent="parentClickHandle"/> </div></template><script> // 引入React組件 import MyReactComponent from './myReactComponent' export default { components: { 'my-react-component': MyReactComponent // 引入React組件 }, data() { return { message: 'Hello from React!', } }, methods: { parentClickHandle(data){ console.log(data); } }, }</script>在 Vue 項(xiàng)目中引入了這個(gè) React 組件，效果如下：
可以看到，這里實(shí)現(xiàn)了Vue到React組件的傳值，并顯示在了頁(yè)面上。根據(jù)右上角的Chrome插件顯示，這個(gè)項(xiàng)目中既使用了Vue又使用了React。
點(diǎn)擊頁(yè)面中的按鈕，可以看到，數(shù)據(jù)從React子組件傳遞到了Vue中：
這樣就簡(jiǎn)單實(shí)現(xiàn)了React和Vue組件之間的數(shù)據(jù)通信。
如果不想通過(guò) Babel plugin 的方式引入的話，可以使用以下這兩種方法。
<template> <div> <react :component="component" :message="message" /> </div></template> <script> import { ReactWrapper } from 'vuera' // 引入vuera庫(kù) import MyReactComponent from './MyReactComponent' // 引入react組件 export default { data () { component: MyReactComponent, message: 'Hello from React!', }, components: { react: ReactWrapper } }</script><template> <div> <my-react-component :message="message" /> </div></template> <script> import { ReactWrapper } from 'vuera' // 引入vuera庫(kù) import MyReactComponent from './MyReactComponent' // 引入react組件 export default { data () { message: 'Hello from React!', }, components: { 'my-react-component': ReactInVue(MyReactComponent) } }</script>在 React 項(xiàng)目中使用 Vue 組件也是同理，可以參考官方文檔。
Vuera 是一個(gè)比較成熟的 JavaScrip 庫(kù)，但是目前已經(jīng)不再維護(hù)（最近一次更新是三年前）。并且，該庫(kù)不支持 Vue 3，如果想要支持 Vue 3，可以使用 Vueury。
Github：https://github.com/akxcv/vuera。
vuereact-combined 是一個(gè)用于 Vue和React快捷集成的工具包，并且適合復(fù)雜的集成場(chǎng)景。通過(guò)這個(gè)工具，可以在任何的Vue和React項(xiàng)目中使用另一個(gè)類型框架的組件，并且解決了復(fù)雜的集成問題。
vuera 開辟了Vue和React融合的想法，但是 vuera只能解決非?；A(chǔ)的組件融合，并且存在插槽(children)和數(shù)據(jù)變更后的渲染性能問題，因此無(wú)法用于復(fù)雜的場(chǎng)景以及生產(chǎn)環(huán)境。
vuereact-combined 將融合做到了極致，支持了大部分的Vue和React組件的功能，并且在渲染更新上使用了和vuera不同的思路，完美解決了渲染性能問題
注意，該項(xiàng)目只支持使用 Vue 2，如果想要使用 Vue 3，可以使用上面的介紹的 Veaury。
使用vuereact-combined的步驟如下。
在項(xiàng)目中安裝vuereact-combined：
npm install --save vuereact-combined在Vue和React的入口文件中引入 vuereact-combined：
import Vue from 'vue'; import React from 'react'; import {Combined} from 'vuereact-combined'; Vue.use(Combined);配置Babel以支持JSX語(yǔ)法和Vue.js的特性。安裝babel-plugin-transform-vue-jsx和babel-preset-react，并在.babelrc文件中添加相應(yīng)的配置：
{ "presets": ["react-app"], "plugins": ["@vue/babel-plugin-transform-vue-jsx"] }在webpack配置文件中添加相應(yīng)的loader和plugin：
const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = function(webpackEnv) { module: { rules: [ { test: //.vue$/, loader: 'vue-loader', }, { test: //.js$/, exclude: /node_modules//(?!(vue|@vue//.*)//).*/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-transform-vue-jsx'] } } }, // 其他規(guī)則... ], }, plugins: [ new VueLoaderPlugin(), // 其他插件... ], };配置完畢后，就可以在Vue和React之間進(jìn)行快捷的集成了。
假設(shè)有一個(gè)React組件，它是一個(gè)簡(jiǎn)單的函數(shù)組件：
// 來(lái)自React項(xiàng)目的組件const MyReactComponent = () => { return <div>Hello React!</div>;};可以在Vue項(xiàng)目中引入并使用這個(gè)組件。下面是一個(gè)使用vuereact-combined的Vue文件示例：
<template> <div> <MyReactComponent /> </div></template><script>import {Combined} from 'vuereact-combined';import MyReactComponent from './MyReactComponent'; // 引入React組件export default { components: { Combined, MyReactComponent // 將React組件注冊(cè)為Vue組件 }, // 其他Vue代碼...};</script>這里，首先引入了MyReactComponent，然后在Vue組件中使用它。通過(guò)將React組件注冊(cè)為Vue組件，我們可以在Vue模板中使用它，就像使用普通的Vue組件一樣。
這里只展示了最基本的使用方法，其他使用場(chǎng)景可以參考官方文檔。
在 React 項(xiàng)目中引入Vue組件的支持程度：
在 Vue 項(xiàng)目中引入 React 組件：
Github：https://github.com/devilwjp/vuereact-combined。
本文鏈接：http://m.rrqrq.com/showinfo-26-10482-0.html竟然可以在一個(gè)項(xiàng)目中混用 Vue 和 React？
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)