正文

React项目引入Vue CDN的完整指南：解决组件共存与数据交互的常见痛点

/0 浏览量
1004

React项目引入Vue CDN的完整指南：解决组件共存与数据交互的常见痛点

前言：为什么会有这个奇怪的需求？

说实话，我第一次听到这个需求的时候，愣了三秒。React项目里引入Vue？这不是典型的”技术自虐”吗？

但当我真正深入聊起来才发现，这不是什么异想天开。很多公司历史包袱太重——早年用Vue搭了一套后台管理系统，组件库、业务模块积累了厚厚一茬。后来前端团队转向React，但那些Vue组件迁移成本太高，干脆就想着”能不能两全其美”。

还有另一种情况：外包项目或者快速原型，React框架是主，但某个第三方小工具只有Vue版本，总不能为了它重写一遍吧？

今天我们就来聊聊，这件事到底能不能做，怎么做得优雅，以及那些会让你头疼到掉头发的坑该怎么填。

一、技术可行性：能不能做到？

答案是：能，但需要理解它为什么能。

React和Vue本质上都是JavaScript库，浏览器里跑的最终都是DOM操作。CDN引入的Vue不会和React产生真正的运行时冲突，因为它们各自管理自己的虚拟DOM树。

关键原理如下：

浏览器 DOM
    ├── React 渲染的 DOM 树（React Fiber 管理）
    │       ├── #root
    │       ├── #another-react-container
    │       └── ...
    │
    └── Vue 渲染的 DOM 树（Vue 自身管理）
            ├── #vue-container
            ├── #another-vue-widget
            └── ...

只要你的容器DIV不重叠，它们就能和平共处。

但这只是最理想的情况。现实中的痛点远比这复杂。

二、基础搭建：三步引入Vue CDN

2.1 引入CDN

在你的React项目的HTML模板（通常是 public/index.html 或 Vite 的 index.html）里加入Vue的CDN：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>React + Vue 共存项目</title>
  <!-- Vue 3 CDN（推荐使用生产环境版本）-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <!-- 如果你需要 Vue 2，替换为：-->
  <!-- <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script> -->
</head>
<body>
  <div id="root"></div>
  <!-- React 的挂载点 -->
  
  <!-- Vue 组件的挂载容器，放在 React 管不到的地方 -->
  <div id="vue-container"></div>
</body>
</html>

重要提醒：Vue 2 和 Vue 3 的API差异巨大，建议新项目统一用 Vue 3。下面全部以 Vue 3 为例。

2.2 React侧：准备挂载点

在React组件里，你需要明确知道哪些区域交给Vue管理：

// App.jsx
import { useEffect, useRef } from 'react';

function App() {
  const reactSection = useRef(null);
  const vueSection = useRef(null);

  return (
    <div className="app">
      <header>
        <h1>React + Vue 共存示例</h1>
      </header>

      {/* React 管理的区域 */}
      <main ref={reactSection}>
        <ReactContent />
      </main>

      {/* Vue 管理的区域 — 放在 React 树之外或特定位置 */}
      <aside ref={vueSection}>
        <VueWidget />
      </aside>
    </div>
  );
}

function ReactContent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>这是 React 区域，当前计数：{count}</p>
      <button onClick={() => setCount(c => c + 1)}>React 按钮</button>
    </div>
  );
}

export default App;

等等，上面的 VueWidget 怎么来的？这就是关键问题了——React组件里如何嵌入并渲染Vue组件。

三、React中挂载Vue组件的三种方案

方案A：直接在useEffect里挂载（最简单但最脆弱）

import { useEffect, useRef } from 'react';

function VueWidget() {
  const containerRef = useRef(null);
  let vueApp = null; // 保存Vue应用实例，用于销毁

  useEffect(() => {
    // 创建Vue应用并挂载
    const { createApp } = window.Vue;
    
    vueApp = createApp({
      template: `
        <div class="vue-widget">
          <h3>这是一个Vue组件</h3>
          <p>消息：{{ message }}</p>
          <button @click="handleClick">Vue 按钮</button>
        </div>
      `,
      data() {
        return {
          message: '你好，从Vue发来问候！'
        };
      },
      methods: {
        handleClick() {
          this.message = '按钮被点击了！时间：' + new Date().toLocaleTimeString();
        }
      }
    });

    vueApp.mount(containerRef.current);

    // 清理函数：组件卸载时销毁Vue应用
    return () => {
      if (vueApp && containerRef.current) {
        vueApp.unmount();
      }
    };
  }, []);

  return <div ref={containerRef}></div>;
}

问题：这种方式虽然能跑，但有几个明显缺陷：

  • Vue组件的模板是硬编码在JS里的字符串，没有 .vue 文件的开发体验
  • 无法使用Vue的组件系统（components、props、emit 等需要用特殊方式处理）
  • 清理逻辑容易出错，导致内存泄漏

方案B：用Vue的组件注册系统（推荐）

更好的做法是先把Vue组件定义好，然后在React的 useEffect 中引用：

import { useEffect, useRef } from 'react';

// 第一步：在全局定义Vue组件（可以在一个单独的 vue-components.js 文件里）
// 这样React和Vue都能看到它们

if (typeof window.VueComponentRegistry === 'undefined') {
  window.VueComponentRegistry = {};
}

// 注册一个Vue组件到全局
function registerVueComponent(name, options) {
  window.VueComponentRegistry[name] = options;
}

// 在模块加载时注册组件
registerVueComponent('HelloVue', {
  template: `
    <div class="hello-vue">
      <h3>{{ title }}</h3>
      <p>{{ message }}</p>
      <button @click="$emit('custom-click', { from: 'vue', timestamp: Date.now() })">
        点击我
      </button>
    </div>
  `,
  props: ['title', 'message'],
  data() {
    return {
      internalState: 'vue-internal'
    };
  },
  mounted() {
    console.log('Vue组件已挂载:', this.title);
  }
});

// 第二步：在React组件中使用
function VueWidget({ onVueClick }) {
  const containerRef = useRef(null);
  let vueApp = null;

  useEffect(() => {
    const { createApp } = window.Vue;
    const registry = window.VueComponentRegistry;

    // 创建一个临时的Vue应用，注册并使用已定义的组件
    vueApp = createApp({
      components: {
        'hello-vue': registry['HelloVue']
      },
      template: `
        <div class="vue-wrapper">
          <hello-vue 
            title="来自Vue的问候" 
            message="我来自React项目中的Vue组件"
            @custom-click="handleVueClick"
          />
        </div>
      `,
      methods: {
        handleVueClick(payload) {
          // 通过回调把数据传给React
          if (onVueClick) {
            onVueClick(payload);
          }
        }
      }
    });

    vueApp.mount(containerRef.current);

    return () => {
      if (vueApp) {
        vueApp.unmount();
        vueApp = null;
      }
    };
  }, [onVueClick]);

  return <div ref={containerRef} />;
}

这个方案的改进：

  • 组件逻辑与React逻辑分离，更易维护
  • 可以利用Vue的 props 和 emit 机制
  • 组件可以在多处复用

方案C：封装一个通用的VueInReact包装器（生产级方案）

如果你要在项目里多处使用Vue组件，每次都手写 useEffect 会很痛苦。封装一个通用组件：

import { useEffect, useRef } from 'react';

/**
 * VueInReact - 在React中嵌入Vue组件的通用包装器
 * 
 * @param {Object} props
 * @param {string} props.componentName - 全局注册的Vue组件名
 * @param {Object} props.componentOptions - Vue组件的options对象（可选，如果已经全局注册可以省略）
 * @param {Object} props.props - 传递给Vue组件的props
 * @param {Function} props.on - 事件监听映射，如 { 'custom-event': handler }
 * @param {ReactNode} props.children - 备用内容，Vue挂载失败时使用
 */
function VueInReact({ 
  componentName, 
  componentOptions = null,
  props = {},
  on = {},
  children 
}) {
  const containerRef = useRef(null);
  let vueApp = null;

  useEffect(() => {
    const { createApp, reactive } = window.Vue;
    const registry = window.VueComponentRegistry || {};

    // 构建Vue组件定义
    const vueComponent = componentOptions 
      ? componentOptions 
      : (registry[componentName] || {});

    // 创建代理方法来转发事件
    const eventHandlers = {};
    Object.entries(on).forEach(([event, handler]) => {
      eventHandlers[`on${event.charAt(0).toUpperCase()}${event.slice(1)}`] = handler;
    });

    // 合并props和事件处理器
    const mergedProps = { ...props, ...eventHandlers };

    // 创建Vue应用
    vueApp = createApp({
      ...vueComponent,
      props: Object.keys(mergedProps),
      setup() {
        return mergedProps;
      }
    });

    // 挂载
    if (containerRef.current) {
      vueApp.mount(containerRef.current);
    }

    // 清理
    return () => {
      if (vueApp && containerRef.current) {
        vueApp.unmount();
        vueApp = null;
      }
    };
  }, [componentName, componentOptions, props, on]);

  return (
    <div ref={containerRef}>
      {children}
    </div>
  );
}

export default VueInReact;

使用方式就变得非常清爽：

// 定义一个Vue组件
window.VueComponentRegistry['ProductCard'] = {
  template: `
    <div class="product-card" :class="{ highlighted: highlight }">
      <img :src="image" :alt="name" />
      <h4>{{ name }}</h4>
      <p class="price">¥{{ price }}</p>
      <button @click="$emit('add-to-cart', { id, name, price })">加入购物车</button>
    </div>
  `,
  props: ['name', 'price', 'image', 'id', 'highlight'],
  emits: ['add-to-cart']
};

// 在React中使用
function ShoppingPage() {
  const handleAddToCart = (product) => {
    console.log('添加到购物车:', product);
    // 触发React侧的状态更新
    addToCart(product);
  };

  return (
    <div>
      <h2>商品列表</h2>
      <VueInReact
        componentName="ProductCard"
        props={{
          name: '机械键盘',
          price: '599',
          image: '/images/keyboard.jpg',
          id: 'kb-001',
          highlight: true
        }}
        on={{ 'add-to-cart': handleAddToCart }}
      />
    </div>
  );
}

四、数据交互：React和Vue之间怎么通信？

这是最核心、也最容易踩坑的部分。两者各自维护自己的状态，没有共享的状态容器，怎么让它们在需要的时候”说话”？

4.1 方案一：回调函数（单向，最简单）

React → Vue：通过 props 传递 Vue → React：通过 emit + React的 onXxx 回调

// React组件
function Parent() {
  const [user, setUser] = useState({ name: '张三', age: 25 });
  
  const handleVueEvent = (data) => {
    console.log('Vue发来的数据:', data);
    setUser(prev => ({ ...prev, ...data }));
  };

  return (
    <div>
      <p>React状态 - 用户名：{user.name}</p>
      
      <VueInReact
        componentName="UserEditor"
        props={{
          initialName: user.name,
          initialAge: user.age
        }}
        on={{ 'user-updated': handleVueEvent }}
      />
    </div>
  );
}

// Vue组件定义
window.VueComponentRegistry['UserEditor'] = {
  template: `
    <div class="user-editor">
      <input v-model="localName" placeholder="姓名" />
      <input type="number" v-model="localAge" placeholder="年龄" />
      <button @click="save">保存</button>
    </div>
  `,
  props: ['initialName', 'initialAge'],
  emits: ['user-updated'],
  data() {
    return {
      localName: this.initialName,
      localAge: this.initialAge
    };
  },
  methods: {
    save() {
      this.$emit('user-updated', {
        name: this.localName,
        age: Number(this.localAge)
      });
    }
  },
  watch: {
    initialName(val) { this.localName = val; },
    initialAge(val) { this.localAge = val; }
  }
};

注意：Vue组件需要 watch props的变化来同步外部数据更新，否则React改了props，Vue看不到。

4.2 方案二：全局事件总线（适合松耦合场景）

Vue 3 移除了 $on/$off/$emit 的实例方法，但可以自己实现一个轻量级事件总线：

// event-bus.js - 创建一个独立的事件总线模块
class EventBus {
  constructor() {
    this.events = new Map();
  }

  on(event, callback) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    this.events.get(event).push(callback);
    
    // 返回取消订阅的函数
    return () => {
      const callbacks = this.events.get(event);
      const index = callbacks.indexOf(callback);
      if (index > -1) {
        callbacks.splice(index, 1);
      }
    };
  }

  off(event, callback) {
    const callbacks = this.events.get(event);
    if (callbacks) {
      const index = callbacks.indexOf(callback);
      if (index > -1) {
        callbacks.splice(index, 1);
      }
    }
  }

  emit(event, data) {
    const callbacks = this.events.get(event);
    if (callbacks) {
      callbacks.forEach(cb => cb(data));
    }
  }
}

// 导出单例
export const bus = new EventBus();

然后在React和Vue中分别订阅和发布：

// React侧
import { useEffect, useState } from 'react';
import { bus } from './event-bus';

function ReactDashboard() {
  const [stats, setStats] = useState({ visitors: 0, orders: 0 });

  useEffect(() => {
    // 订阅Vue发来的事件
    const unsubscribe = bus.on('vue-stats-update', (data) => {
      setStats(prev => ({ ...prev, ...data }));
    });

    return () => unsubscribe();
  }, []);

  // 主动向Vue发送数据
  const notifyVue = () => {
    bus.emit('react-to-vue', { timestamp: Date.now(), message: '来自React' });
  };

  return (
    <div>
      <p>访客数：{stats.visitors}</p>
      <button onClick={notifyVue}>通知Vue</button>
    </div>
  );
}

// Vue组件侧
window.VueComponentRegistry['VueWidget'] = {
  template: `
    <div>
      <p>收到的消息：{{ lastMessage }}</p>
      <button @click="sendToReact">发送数据给React</button>
    </div>
  `,
  data() {
    return {
      lastMessage: '暂无消息'
    };
  },
  mounted() {
    // 订阅React的事件
    this._unsubscribe = window.eventBus.on('react-to-vue', (data) => {
      this.lastMessage = data.message;
    });
  },
  beforeUnmount() {
    // 记得取消订阅，防止内存泄漏
    if (this._unsubscribe) {
      this._unsubscribe();
    }
  },
  methods: {
    sendToReact() {
      window.eventBus.emit('vue-stats-update', {
        visitors: Math.floor(Math.random() * 1000),
        orders: Math.floor(Math.random() * 100)
      });
    }
  }
};

需要在入口文件导出eventBus实例：

// main.js 或 index.js
import { bus } from './event-bus';
window.eventBus = bus;

4.3 方案三：共享状态对象（最可靠）

对于频繁的数据交换，事件总线可能显得不够直观。可以用一个共享的响应式对象：

// shared-state.js
import { reactive } from 'vue'; // 注意：这里引入Vue的reactive

const sharedState = reactive({
  currentUser: null,
  theme: 'light',
  notifications: []
});

export { sharedState };

React侧用 useState 配合订阅，Vue侧直接用响应式对象：

// React侧 - 需要自己实现订阅机制
import { useState, useEffect, useRef } from 'react';
import { sharedState } from './shared-state';

function ThemeToggle() {
  const [theme, setTheme] = useState(sharedState.theme);

  useEffect(() => {
    // 由于sharedState是Vue的reactive对象，React无法自动感知变化
    // 需要手动订阅，这里用一个hack：利用Vue的watch创建同步机制
    const { watch } = window.Vue;
    
    const stopWatch = watch(
      () => sharedState.theme,
      (newTheme) => {
        setTheme(newTheme);
      }
    );

    return () => stopWatch();
  }, []);

  const toggleTheme = () => {
    sharedState.theme = sharedState.theme === 'light' ? 'dark' : 'light';
  };

  return (
    <button onClick={toggleTheme}>
      当前主题：{theme}
    </button>
  );
}

但是等等，这个方案有个问题——import { reactive } from 'vue' 需要在React环境里也能import Vue。如果你的项目用Webpack/Vite构建，这需要额外配置。纯CDN引入时，window.Vue.reactive 可以访问。

五、常见痛点与解决方案

痛点一：样式冲突

React和Vue组件可能都引入了样式，class名撞车是常有的事。

解决方案：CSS作用域隔离

// 方法1：给Vue容器加唯一class前缀
function VueWidget() {
  const containerRef = useRef(null);
  
  useEffect(() => {
    const { createApp } = window.Vue;
    const app = createApp({ /* ... */ });
    
    // 挂载后给根元素加前缀class
    app.mount(containerRef.current);
    containerRef.current.classList.add('vue-ns');
  }, []);
  
  return <div ref={containerRef} className="vue-ns-container" />;
}

/* 样式使用命名空间前缀 */
.vue-ns .btn {
  /* Vue组件的按钮样式 */
}

.btn {
  /* React组件的按钮样式 */
}

<!-- 方法2：Vue组件内部使用scoped（如果是.vue文件）-->
<style scoped>
.btn {
  /* 只会作用于当前组件 */
}
</style>

痛点二：生命周期不一致导致的闪烁

React的 useEffect 和Vue的 mounted 执行顺序不确定，可能导致页面闪烁。

function VueWidget() {
  const containerRef = useRef(null);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    // 先显示骨架屏
    const { createApp } = window.Vue;
    const app = createApp({
      mounted() {
        // Vue挂载完成后标记
        setIsMounted(true);
      },
      template: '<div class="vue-content">...</div>'
    });
    
    app.mount(containerRef.current);
    
    return () => app.unmount();
  }, []);

  if (!isMounted) {
    return <div className="vue-skeleton">加载中...</div>;
  }
  
  return <div ref={containerRef} />;
}

痛点三：内存泄漏

这是最隐蔽的问题。Vue组件没有正确卸载，或者事件监听器没有清理。

function VueWidget() {
  const containerRef = useRef(null);
  const vueAppRef = useRef(null);
  const eventListenersRef = useRef(new Map());

  useEffect(() => {
    const { createApp } = window.Vue;
    
    vueAppRef.current = createApp({ /* ... */ });
    vueAppRef.current.mount(containerRef.current);

    // 清理所有注册的事件监听
    return () => {
      // 1. 卸载Vue应用
      if (vueAppRef.current) {
        vueAppRef.current.unmount();
        vueAppRef.current = null;
      }
      
      // 2. 清理全局事件总线监听
      eventListenersRef.current.forEach((cleanup, key) => {
        cleanup();
      });
      eventListenersRef.current.clear();
    };
  }, []);

  // 提供一个方法给子组件注册需要清理的监听
  const registerCleanup = (key, cleanupFn) => {
    eventListenersRef.current.set(key, cleanupFn);
  };

  return <div ref={containerRef} />;
}

痛点四：TypeScript类型问题

如果你的React项目用了TypeScript，window.Vue 需要类型声明：

// src/types/vue-global.d.ts
import type { App, ComponentOptions } from 'vue';

declare global {
  interface Window {
    Vue?: {
      createApp: (options: ComponentOptions) => App;
      reactive: <T>(obj: T) => T;
      ref: <T>(value: T) => { value: T };
      watch: (source: any, callback: (val: any) => void) => () => void;
      computed: <T>(getter: () => T) => { value: T };
    };
    VueComponentRegistry?: Record<string, ComponentOptions>;
  }
}

export {};

六、完整实战案例：一个混合框架的管理后台

让我们看一个完整的例子。假设你有一个React管理后台，但有一个现成的Vue图表组件需要嵌入：

项目结构：
├── public/
│   └── index.html          # CDN引入Vue
├── src/
│   ├── components/
│   │   ├── ReactLayout.jsx
│   │   └── VueChartBridge.jsx
│   ├── vue-components/
│   │   └── chart-component.js  # Vue图表组件定义
│   ├── App.jsx
│   └── main.jsx

<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="root"></div>
  <div id="vue-chart-container"></div>
</body>
</html>

// src/vue-components/chart-component.js
// 独立的Vue组件定义文件，React和Vue都能引用

export const ChartComponent = {
  template: `
    <div class="chart-widget" :style="{ width: width, height: height }">
      <canvas ref="canvasRef"></canvas>
      <div v-if="loading" class="chart-loading">加载中...</div>
      <div v-if="error" class="chart-error">{{ error }}</div>
    </div>
  `,
  props: {
    width: { type: String, default: '100%' },
    height: { type: String, default: '300px' },
    chartData: { type: Array, default: () => [] },
    chartType: { type: String, default: 'bar' }
  },
  emits: ['data-ready', 'error'],
  data() {
    return {
      loading: true,
      error: null,
      ctx: null
    };
  },
  mounted() {
    this.initChart();
  },
  watch: {
    chartData: {
      handler() {
        this.renderChart();
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      this.ctx = this.$refs.canvasRef?.getContext('2d');
      this.renderChart();
    },
    renderChart() {
      this.loading = true;
      this.error = null;
      
      try {
        // 模拟异步数据加载
        setTimeout(() => {
          if (this.ctx && this.chartData.length > 0) {
            this.drawChart();
            this.loading = false;
            this.$emit('data-ready', { 
              type: this.chartType, 
              points: this.chartData.length 
            });
          }
        }, 300);
      } catch (e) {
        this.error = e.message;
        this.$emit('error', e);
      }
    },
    drawChart() {
      const { ctx } = this;
      const { width, height } = this.$el;
      ctx.clearRect(0, 0, width, height);
      
      // 简单的柱状图绘制
      const barWidth = (width - 40) / this.chartData.length;
      const maxValue = Math.max(...this.chartData.map(d => d.value));
      
      this.chartData.forEach((item, i) => {
        const barHeight = (item.value / maxValue) * (height - 40);
        ctx.fillStyle = '#4F46E5';
        ctx.fillRect(20 + i * barWidth, height - barHeight - 20, barWidth - 4, barHeight);
      });
    }
  }
};

// 注册到全局
if (typeof window !== 'undefined') {
  if (!window.VueComponentRegistry) {
    window.VueComponentRegistry = {};
  }
  window.VueComponentRegistry['ChartComponent'] = ChartComponent;
}

// src/components/VueChartBridge.jsx
import { useEffect, useRef, useState } from 'react';

function VueChartBridge({ data, type = 'bar', onReady, onError }) {
  const containerRef = useRef(null);
  const vueAppRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: '100%', height: '300px' });

  useEffect(() => {
    const { createApp } = window.Vue;
    const registry = window.VueComponentRegistry;
    
    vueAppRef.current = createApp({
      components: {
        'chart-component': registry['ChartComponent']
      },
      template: `
        <chart-component 
          :chart-data="chartData"
          :chart-type="chartType"
          @data-ready="handleReady"
          @error="handleError"
        />
      `,
      props: ['chartData', 'chartType'],
      methods: {
        handleReady(payload) {
          window.__vueChartBridge?.onReady?.(payload);
        },
        handleError(err) {
          window.__vueChartBridge?.onError?.(err);
        }
      }
    });

    const app = vueAppRef.current;
    app.mount(containerRef.current);

    // 将回调存到window方便Vue访问
    window.__vueChartBridge = { onReady, onError };

    // 监听容器尺寸变化
    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const { width, height } = entry.contentRect;
        setDimensions({
          width: `${width}px`,
          height: `${height}px`
        });
      }
    });
    
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }

    return () => {
      resizeObserver.disconnect();
      if (vueAppRef.current) {
        vueAppRef.current.unmount();
        vueAppRef.current = null;
      }
      delete window.__vueChartBridge;
    };
  }, []);

  // 监听外部数据变化，通过props传递
  useEffect(() => {
    if (vueAppRef.current?._container) {
      // Vue 3 内部访问props的方式（不推荐生产使用，仅作演示）
      // 实际项目中应该通过重新挂载或事件总线传递
      const instance = vueAppRef.current._instance;
      if (instance && instance.props) {
        instance.props.chartData = data;
        instance.props.chartType = type;
      }
    }
  }, [data, type]);

  return (
    <div 
      ref={containerRef} 
      style={{ width: dimensions.width, height: dimensions.height }}
    />
  );
}

export default VueChartBridge;

// src/App.jsx
import { useState, useEffect } from 'react';
import VueChartBridge from './components/VueChartBridge';

function App() {
  const [chartData, setChartData] = useState([]);
  const [reactMessage, setReactMessage] = useState('等待图表加载...');

  useEffect(() => {
    // 模拟React获取数据
    setTimeout(() => {
      setChartData([
        { label: '一月', value: 65 },
        { label: '二月', value: 59 },
        { label: '三月', value: 80 },
        { label: '四月', value: 81 },
        { label: '五月', value: 56 }
      ]);
    }, 500);
  }, []);

  const handleChartReady = (payload) => {
    setReactMessage(`图表已就绪！共 ${payload.points} 个数据点`);
  };

  const handleChartError = (error) => {
    setReactMessage(`图表加载失败: ${error.message}`);
  };

  return (
    <div className="app">
      <header>
        <h1>React + Vue 混合项目</h1>
      </header>
      
      <main>
        <section className="react-section">
          <h2>React 区域</h2>
          <p>{reactMessage}</p>
          <button onClick={() => setReactMessage('React按钮被点击了！')}>
            测试React响应
          </button>
        </section>

        <section className="vue-section">
          <h2>Vue 图表组件</h2>
          <VueChartBridge
            data={chartData}
            type="bar"
            onReady={handleChartReady}
            onError={handleChartError}
          />
        </section>
      </main>
    </div>
  );
}

export default App;

七、性能考量与最佳实践

7.1 不要过度使用

每引入一个Vue实例，就多一层抽象和开销。如果只有1-2个Vue组件，可以接受。但如果整个页面都是Vue，建议直接迁移。

7.2 按需加载Vue

如果Vue组件不多，可以用动态导入：

useEffect(() => {
  // 延迟加载Vue，等React渲染完成后再加载Vue
  const loadVue = async () => {
    const vueScript = document.createElement('script');
    vueScript.src = 'https://unpkg.com/vue@3/dist/vue.global.prod.js';
    vueScript.onload = () => {
      // Vue加载完成后挂载
      const { createApp } = window.Vue;
      // ... 挂载逻辑
    };
    document.head.appendChild(vueScript);
  };
  
  loadVue();
}, []);

7.3 考虑用Web Components替代

如果你的Vue组件只是简单的展示逻辑，更优雅的方案是把它包装成 Web Components：

// 用Vue构建，但导出为Web Component
import { defineCustomElement } from 'vue';

const MyVueElement = defineCustomElement({
  // Vue组件定义
  props: ['title'],
  template: '<div>{{ title }}</div>'
});

customElements.define('my-vue-element', MyVueElement);

然后在React里直接像用普通HTML标签一样用：

function App() {
  return <my-vue-element title="Hello from Vue"></my-vue-element>;
}

Web Components是浏览器原生标准，React、Vue、Angular都能无缝使用，不存在生命周期冲突问题。

八、总结与决策建议

场景 推荐方案
少量Vue组件嵌入React CDN引入 + VueInReact 包装器
频繁数据交互 全局事件总线 或 Web Components
样式敏感项目 CSS作用域隔离 + 命名空间
TypeScript项目 补充类型声明文件
长期维护的大型项目 逐步迁移，不要长期共存

最后说一句大实话：React项目里引入Vue CDN，本质上是一个过渡方案，不是一个终极答案。 它能帮你解决眼下的燃眉之急，但不应该成为长期架构。如果你的团队已经决定拥抱React，那把Vue组件迁移到React才是正道。

但如果你在过渡期，这篇文章里的方案应该能帮你少走很多弯路。

有问题随时交流，祝你的混合项目少踩坑多开心 😊

-- 展开阅读全文 --