對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.0的現場演示顯示，華為的實況窗可以更高效的展現出實時通知，比如鎖屏上就能看到外賣、打車、銀行
Veaury 是一個基于 React 和 Vue3 的工具庫，主要用于React和Vue在一個項目中公共使用的場景，主要運用在項目遷移、技術棧融合的開發模式、跨技術棧使用第三方組件的場景。
Veaury的特點如下：
Veaury 的文檔寫的非常詳細，這里就不再詳細介紹其使用方式了。需要注意的是，Veaury 并不支持 Vue 2，如果需要使用Vue 2，可以使用下面要介紹的工具庫。
Github：https://github.com/devilwjp/veaury。
Vuera 是一個用于在 Vue 應用中使用 React 組件的庫，同時也支持在 React 應用中使用 Vue 組件。它提供了一種方便的方式，使開發人員能夠在不同的框架之間無縫地使用對方的組件。
要在 Vue 應用中使用React組件，可以按照以下步驟使用Vuera。
安裝Vuera：使用npm或yarn在您的Vue項目中安裝Vuera庫。
// 使用 yarn 安裝yarn add vuera// 使用 npm 安裝npm i -S vuera安裝依賴。
由于需要在Vue中使用React組件，所以首先需要在項目中安裝 React，安裝指令如下：
npm install --save react react-dom在babel.config.js文件中添加以下配置即可：
{ "presets": [ "react" ], "plugins": [ "vuera/babel" ]}接下來在項目中以插件的形式來引入并使用vuera庫，可以在 main.js 中加入如下代碼：
import { VuePlugin } from 'vuera'Vue.use(VuePlugin)完成上述配置之后，就可以在Vue項目中引入并使用React組件了。
React組件代碼如下：
import React from 'react'function myReactComponent(props) { const { message } = props function childClickHandle() { props.onMyEvent('React子組件傳遞的數據') } return ( <div> <h2>{ message }</h2> <button onClick={ childClickHandle }>向Vue項目傳遞React子組件的數據</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 項目中引入了這個 React 組件，效果如下：
可以看到，這里實現了Vue到React組件的傳值，并顯示在了頁面上。根據右上角的Chrome插件顯示，這個項目中既使用了Vue又使用了React。
點擊頁面中的按鈕，可以看到，數據從React子組件傳遞到了Vue中：
這樣就簡單實現了React和Vue組件之間的數據通信。
如果不想通過 Babel plugin 的方式引入的話，可以使用以下這兩種方法。
<template> <div> <react :component="component" :message="message" /> </div></template> <script> import { ReactWrapper } from 'vuera' // 引入vuera庫 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庫 import MyReactComponent from './MyReactComponent' // 引入react組件 export default { data () { message: 'Hello from React!', }, components: { 'my-react-component': ReactInVue(MyReactComponent) } }</script>在 React 項目中使用 Vue 組件也是同理，可以參考官方文檔。
Vuera 是一個比較成熟的 JavaScrip 庫，但是目前已經不再維護（最近一次更新是三年前）。并且，該庫不支持 Vue 3，如果想要支持 Vue 3，可以使用 Vueury。
Github：https://github.com/akxcv/vuera。
vuereact-combined 是一個用于 Vue和React快捷集成的工具包，并且適合復雜的集成場景。通過這個工具，可以在任何的Vue和React項目中使用另一個類型框架的組件，并且解決了復雜的集成問題。
vuera 開辟了Vue和React融合的想法，但是 vuera只能解決非常基礎的組件融合，并且存在插槽(children)和數據變更后的渲染性能問題，因此無法用于復雜的場景以及生產環境。
vuereact-combined 將融合做到了極致，支持了大部分的Vue和React組件的功能，并且在渲染更新上使用了和vuera不同的思路，完美解決了渲染性能問題
注意，該項目只支持使用 Vue 2，如果想要使用 Vue 3，可以使用上面的介紹的 Veaury。
使用vuereact-combined的步驟如下。
在項目中安裝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語法和Vue.js的特性。安裝babel-plugin-transform-vue-jsx和babel-preset-react，并在.babelrc文件中添加相應的配置：
{ "presets": ["react-app"], "plugins": ["@vue/babel-plugin-transform-vue-jsx"] }在webpack配置文件中添加相應的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'] } } }, // 其他規則... ], }, plugins: [ new VueLoaderPlugin(), // 其他插件... ], };配置完畢后，就可以在Vue和React之間進行快捷的集成了。
假設有一個React組件，它是一個簡單的函數組件：
// 來自React項目的組件const MyReactComponent = () => { return <div>Hello React!</div>;};可以在Vue項目中引入并使用這個組件。下面是一個使用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組件注冊為Vue組件 }, // 其他Vue代碼...};</script>這里，首先引入了MyReactComponent，然后在Vue組件中使用它。通過將React組件注冊為Vue組件，我們可以在Vue模板中使用它，就像使用普通的Vue組件一樣。
這里只展示了最基本的使用方法，其他使用場景可以參考官方文檔。
在 React 項目中引入Vue組件的支持程度：
在 Vue 項目中引入 React 組件：
Github：https://github.com/devilwjp/vuereact-combined。
本文鏈接：http://www.tebozhan.com/showinfo-26-10482-0.html竟然可以在一個項目中混用 Vue 和 React？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 使用Docker構建輕量級Linux容器
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號