正文

React项目如何引用Vue组件完整方案CDN引入依赖冲突解决与生命周期处理实战案例

/0 浏览量
0921

React项目如何引用Vue组件完整方案CDN引入依赖冲突解决与生命周期处理实战案例

先说说我为什么写这篇东西

上个月我们团队接了一个挺棘手的需求：公司有个老的Vue管理后台，现在要用React重写前端，但有些组件不想搬过来——比如一个复杂的图表组件，是Vue写的，而且改了三个月才调顺。业务方说”别动那个组件，我们懂它”。

这就逼得我研究了一整周：怎么在React项目里用Vue组件？直接上CDN？组件冲突怎么办？生命周期怎么对接？

今天这篇，把我踩过的坑、测试过的方案，全给你掰开了讲。建议先把 coffee 续上，因为这事儿有点绕。

一、背景：我们到底在干嘛

简单说，就是跨框架混用。React 是 Facebook 维护的，Vue 是尤雨溪大佬搞出来的，两个框架的设计理念、渲染机制、状态管理完全不一样。但现实中，公司迁移项目、技术选型过渡期、第三方库绑定特定框架，这种事儿太常见了。

我的项目情况：

  • React 18 + TypeScript + Vite 构建
  • Vue 2.7（因为图表库依赖 Vue 2，升级成本太高）
  • 需要在 React 页面里嵌入一个 Vue 图表组件

为什么不用重新用 React 写？

说实话，我试过。但那个图表组件依赖了一个叫 v-charts 的 Vue 专用库，里面还有自定义指令、复杂的生命周期钩子，迁移过来至少要两周，而且还得保证效果一模一样。业务方说”两周等不了，三天内上线”。

好，那就搞混用方案。

二、CDN 引入：最直接的思路

先把最朴素的想法说出来：直接在 HTML 里用 script 标签引入 Vue，然后在 React 的 effect 里调用 Vue 的 API 挂载组件。

这是最快的方式，但也是最容易踩坑的方式。

方案一：纯 CDN 引入（先跑通再说）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>React + Vue 混合项目</title>
  <!-- 引入 React -->
  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <!-- 引入 Babel，用于在浏览器中编译 JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 引入 Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <div id="vue-mount-point"></div>

  <script type="text/babel">
    // React 组件
    function App() {
      React.useEffect(() => {
        // 挂载 Vue 组件
        new Vue({
          el: '#vue-mount-point',
          template: '<div>我是 Vue 组件，在 React 里被挂载</div>'
        });
      }, []);

      return (
        <div>
          <h1>我是 React 应用</h1>
          <p>下面这个由 Vue 渲染：</p>
          <div id="vue-mount-point"></div>
        </div>
      );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
</html>

跑起来之后，你看到页面上同时有 React 的内容和 Vue 的内容。但是！ 这只是个玩具。真实项目里有更多问题。

三、依赖冲突：两个框架打架怎么办

3.1 全局变量污染问题

当你同时引入 React 和 Vue，它们都可能把东西挂到 window 上。比如：

  • React 会挂 React、ReactDOM
  • Vue 会挂 Vue

这本身不是问题，但如果你的项目还引入了其他库，比如 moment、axios，你可能得注意命名空间。更严重的是——如果你同时有 Vue 2 和 Vue 3 的依赖，就会出问题。

3.2 我们的实际情况：Vue 2 和 Vue 3 共存

我们项目有个尴尬的情况：主框架是 Vue 2，但后来引入的一个地图组件依赖 Vue 3。这时候 CDNs 就出问题了：

Vue 2 的 CDN: https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js
Vue 3 的 CDN: https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js

如果你两个都引入，Vue 全局变量会被后面加载的那个覆盖，前面那个框架的实例就全部失效了。

解决方案：给 Vue 指定独立的命名空间

Vue 3 支持这个能力，通过 app.config.globalProperties 或者自定义构造函数隔离：

// 先加载 Vue 2
import Vue2 from 'vue'; // 来自 npm 包，不是 CDN

// 再加载 Vue 3，用变量别名隔离
import Vue3 from 'vue/dist/vue.esm-bundler.js'; // 手动指定路径

// 或者用 CDN 方式，先加载 Vue 3，再加载 Vue 2，用不同的全局变量
// 实际上更稳妥的做法是：让 Vue 2 和 Vue 3 各自用独立的 script 加载，
// 然后在代码中通过模块系统引用，避免全局变量冲突

但我们的项目用的是 Vite + React，所以更好的方式是全部走 npm 包，不走 CDN 全局变量。让我换个思路——

四、正确方案：用 npm 包 + 隔离挂载

核心思路

  1. 用 npm install vue@2.7.14 把 Vue 作为本地依赖
  2. 在 React 组件中通过 useRef 获取 DOM 节点
  3. 在 useEffect 中手动创建 Vue 实例并挂载到那个 DOM 节点
  4. 组件卸载时手动销毁 Vue 实例，防止内存泄漏

完整实战代码

第一步：安装依赖

npm install vue@2.7.14
npm install react-dom@18
npm install react@18

第二步：封装 Vue 组件引用 Hook

这是最关键的部分。我写了一个自定义 Hook，专门处理 Vue 组件的挂载和卸载：

// useVueComponent.ts
import { useEffect, useRef } from 'react';
import Vue, { VueConstructor } from 'vue';

interface VueComponentOptions {
  template?: string;
  render?: (h: ReturnType<VueConstructor>['h']) => any;
  data?: () => Record<string, any>;
  propsData?: Record<string, any>;
  methods?: Record<string, Function>;
  computed?: Record<string, any>;
  created?: () => void;
  mounted?: () => void;
  beforeDestroy?: () => void;
  destroyed?: () => void;
  [key: string]: any;
}

interface UseVueComponentReturn {
  mountRef: React.RefObject<HTMLDivElement>;
  updateProps: (newProps: Record<string, any>) => void;
  destroy: () => void;
}

/**
 * 在 React 项目中安全地引用 Vue 组件
 * @param componentOptions Vue 组件的配置选项
 * @param dependencies 依赖数组，变化时重新挂载 Vue 组件
 */
export function useVueComponent(
  componentOptions: VueComponentOptions,
  dependencies: any[] = []
): UseVueComponentReturn {
  const mountRef = useRef<HTMLDivElement>(null);
  const vueInstanceRef = useRef<Vue | null>(null);
  const isMountedRef = useRef<boolean>(false);

  // 挂载 Vue 组件到指定的 DOM 节点
  const mountVueComponent = () => {
    if (!mountRef.current) return;

    // 如果之前有 Vue 实例，先销毁
    if (vueInstanceRef.current) {
      vueInstanceRef.current.$destroy();
      vueInstanceRef.current = null;
    }

    // 创建 Vue 实例并挂载
    const options = {
      ...componentOptions,
      el: mountRef.current,
    };

    vueInstanceRef.current = new Vue(options);
    isMountedRef.current = true;
  };

  // 更新 Vue 组件的 props
  const updateProps = (newProps: Record<string, any>) => {
    if (!vueInstanceRef.current) return;

    // Vue 2 的 props 通过 data 或 prop 传递
    // 这里我们通过设置 Vue 实例的数据来更新
    Object.keys(newProps).forEach((key) => {
      (vueInstanceRef.current as any)[key] = newProps[key];
    });

    // 强制 Vue 重新渲染
    vueInstanceRef.current.$forceUpdate();
  };

  // 销毁 Vue 组件
  const destroy = () => {
    if (vueInstanceRef.current) {
      vueInstanceRef.current.$destroy();
      vueInstanceRef.current = null;
      isMountedRef.current = false;
    }
  };

  useEffect(() => {
    mountVueComponent();

    // 清理函数：组件卸载时销毁 Vue 实例
    return () => {
      destroy();
    };
  }, dependencies);

  return {
    mountRef,
    updateProps,
    destroy,
  };
}

第三步：编写实际的 Vue 图表组件

// VueChartComponent.tsx
import React from 'react';
import { useVueComponent } from './useVueComponent';

interface VueChartProps {
  data: Array<{ name: string; value: number }>;
  title: string;
  type?: 'bar' | 'line' | 'pie';
  onReady?: () => void;
}

/**
 * React 包裹的 Vue 图表组件
 * 内部使用 Vue 2 渲染图表
 */
const VueChartComponent: React.FC<VueChartProps> = ({
  data,
  title,
  type = 'bar',
  onReady,
}) => {
  const { mountRef, updateProps, destroy } = useVueComponent(
    {
      // Vue 组件的配置
      data() {
        return {
          chartData: data,
          chartTitle: title,
          chartType: type,
        };
      },
      template: `
        <div class="vue-chart-container">
          <h3>{{ chartTitle }}</h3>
          <div class="chart">
            <!-- 简单的 SVG 图表，实际项目中用 v-charts 或 echarts-for-vue -->
            <svg width="400" height="200" viewBox="0 0 400 200">
              <rect 
                v-for="(item, index) in chartData" 
                :key="index"
                :x="index * 60 + 10"
                :y="180 - item.value * 1.5"
                width="50"
                :height="item.value * 1.5"
                fill="steelblue"
              />
              <text x="10" y="195" fill="#666" font-size="12">
                {{ chartData.length }} 条数据
              </text>
            </svg>
          </div>
        </div>
      `,
      mounted() {
        console.log('[Vue Chart] 组件已挂载');
        onReady?.();
      },
      beforeDestroy() {
        console.log('[Vue Chart] 组件即将销毁');
      },
    },
    // 依赖数组：当 data、title、type 变化时重新挂载
    [data, title, type]
  );

  return (
    <div ref={mountRef} className="vue-chart-wrapper">
      {/* Vue 组件会挂载到这个 div 里 */}
    </div>
  );
};

export default VueChartComponent;

第四步：在 React 页面中使用

// Dashboard.tsx
import React, { useState, useCallback } from 'react';
import VueChartComponent from './VueChartComponent';

const Dashboard: React.FC = () => {
  const [chartData, setChartData] = useState([
    { name: '一月', value: 85 },
    { name: '二月', value: 92 },
    { name: '三月', value: 78 },
    { name: '四月', value: 95 },
    { name: '五月', value: 88 },
  ]);

  const handleDataUpdate = useCallback(() => {
    // 模拟数据更新
    setChartData([
      { name: '一月', value: 90 },
      { name: '二月', value: 85 },
      { name: '三月', value: 100 },
      { name: '四月', value: 92 },
      { name: '五月', value: 88 },
    ]);
  }, []);

  const handleReady = useCallback(() => {
    console.log('Vue 图表组件已准备就绪');
  }, []);

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React + Vue 混合仪表盘</h1>

      {/* React 部分 */}
      <div style={{ marginBottom: '20px' }}>
        <button onClick={handleDataUpdate}>
          更新图表数据（React 控制）
        </button>
        <p>当前 React 状态：{chartData.length} 条数据</p>
      </div>

      {/* Vue 图表组件 */}
      <VueChartComponent
        data={chartData}
        title="月度销售数据"
        type="bar"
        onReady={handleReady}
      />

      {/* 纯 React 内容 */}
      <div style={{ marginTop: '20px', padding: '15px', background: '#f5f5f5' }}>
        <h3>React 区域</h3>
        <p>这部分内容由 React 渲染，上面的图表由 Vue 渲染。</p>
      </div>
    </div>
  );
};

export default Dashboard;

五、生命周期对接：React 和 Vue 的握手协议

这部分是最有意思的，也是很多人忽略的。

5.1 生命周期对照表

React (Hooks) Vue 2 Vue 3
useEffect(() => {}, []) created + mounted onMounted
useEffect(() => {}) (有依赖) watch + updated onUpdated
useEffect(() => { return cleanup }) beforeDestroy + destroyed onUnmounted

5.2 实战：处理复杂的生命周期同步

假设你的 Vue 组件需要从 React 接收初始数据，然后自己维护状态，最后在 React 卸载时做清理。

// ComplexVueComponent.tsx
import React, { useEffect, useRef, useState } from 'react';
import Vue from 'vue';

interface ComplexVueComponentProps {
  initialData: { id: string; value: number }[];
  onStateChange: (state: any) => void;
  autoDestroy?: boolean;
}

const ComplexVueComponent: React.FC<ComplexVueComponentProps> = ({
  initialData,
  onStateChange,
  autoDestroy = true,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const vueInstanceRef = useRef<any>(null);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    if (!containerRef.current) return;

    // 创建 Vue 实例
    const vm = new Vue({
      el: containerRef.current,
      data: {
        items: initialData,
        selectedId: null,
        isLoading: false,
      },
      computed: {
        // 计算属性：过滤后的数据
        filteredItems() {
          return this.items.filter((item) => item.value > 50);
        },
        // 计算属性：总数
        totalCount() {
          return this.items.length;
        },
      },
      methods: {
        selectItem(id: string) {
          this.selectedId = id;
          // 通知 React 父组件状态变化
          onStateChange({ selectedId: id });
        },
        addItem() {
          this.isLoading = true;
          // 模拟异步操作
          setTimeout(() => {
            const newItem = {
              id: `item-${Date.now()}`,
              value: Math.floor(Math.random() * 100),
            };
            this.items.push(newItem);
            this.isLoading = false;
            // 再次通知 React
            onStateChange({ items: this.items });
          }, 500);
        },
        removeItem(id: string) {
          this.items = this.items.filter((item) => item.id !== id);
          onStateChange({ items: this.items });
        },
      },
      created() {
        console.log('[Vue] 组件创建，开始初始化');
      },
      mounted() {
        console.log('[Vue] 组件挂载完成');
        setMounted(true);
        // 通知 React 父组件已挂载
        onStateChange({ mounted: true });
      },
      updated() {
        console.log('[Vue] 视图已更新');
      },
      beforeDestroy() {
        console.log('[Vue] 组件即将销毁，执行清理');
        // 在这里做清理工作，比如清除定时器、取消订阅等
      },
      destroyed() {
        console.log('[Vue] 组件已销毁');
      },
      template: `
        <div class="complex-vue-component">
          <div class="header">
            <h2>Vue 数据管理组件</h2>
            <span class="badge">共 {{ totalCount }} 条</span>
          </div>
          
          <div class="actions">
            <button 
              @click="addItem" 
              :disabled="isLoading"
              class="btn-add"
            >
              {{ isLoading ? '添加中...' : '添加数据' }}
            </button>
          </div>
          
          <ul class="item-list">
            <li 
              v-for="item in filteredItems" 
              :key="item.id"
              :class="{ selected: selectedId === item.id }"
              @click="selectItem(item.id)"
            >
              <span class="item-name">{{ item.id }}</span>
              <span class="item-value">{{ item.value }}</span>
              <button 
                class="btn-remove" 
                @click.stop="removeItem(item.id)"
              >
                删除
              </button>
            </li>
          </ul>
          
          <div class="status" v-if="!mounted">
            加载中...
          </div>
        </div>
      `,
    });

    vueInstanceRef.current = vm;

    // 清理函数
    return () => {
      if (autoDestroy && vm) {
        vm.$destroy();
        vueInstanceRef.current = null;
      }
    };
  }, [initialData, onStateChange, autoDestroy]);

  // 监听 initialData 变化，同步到 Vue 组件
  useEffect(() => {
    if (vueInstanceRef.current && vueInstanceRef.current.items) {
      // Vue 2 不支持直接替换整个数组的响应式，需要用 $set
      vueInstanceRef.current.items = initialData;
      vueInstanceRef.current.$forceUpdate();
    }
  }, [initialData]);

  return (
    <div ref={containerRef} className="vue-component-wrapper" />
  );
};

export default ComplexVueComponent;

六、依赖冲突的终极解决方案

6.1 问题：Vue 和 React 都依赖了不同的全局函数

有些第三方库会 monkey-patch 全局对象。比如某个库会修改 Array.prototype，添加自己的方法。当 React 和 Vue 同时加载时，可能会互相覆盖。

6.2 解决方案：使用 iframe 隔离

这是最彻底的方案，虽然有点”重”，但适用于对隔离性要求极高的场景。

// VueInIframe.tsx
import React, { useEffect, useRef } from 'react';

interface VueInIframeProps {
  vueHtml: string;
  width?: string | number;
  height?: string | number;
  onLoad?: () => void;
}

/**
 * 使用 iframe 隔离 Vue 组件，彻底解决依赖冲突
 */
const VueInIframe: React.FC<VueInIframeProps> = ({
  vueHtml,
  width = '100%',
  height = '400px',
  onLoad,
}) => {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
    if (!iframeDocument) return;

    // 写入完整的 HTML 文档，包含独立的 Vue 环境
    iframeDocument.open();
    iframeDocument.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"><\/script>
        <style>
          body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
        </style>
      </head>
      <body>
        <div id="app">${vueHtml}</div>
        <script>
          new Vue({
            el: '#app',
            data: {
              message: '来自 Vue iframe 的问候'
            },
            mounted() {
              // 通知父页面已加载完成
              window.parent.postMessage({ type: 'vue-loaded' }, '*');
            }
          });
        <\/script>
      </body>
      </html>
    `);
    iframeDocument.close();

    iframe.addEventListener('load', () => {
      onLoad?.();
    });
  }, [vueHtml, onLoad]);

  return (
    <iframe
      ref={iframeRef}
      style={{
        width,
        height,
        border: '1px solid #e0e0e0',
        borderRadius: '8px',
      }}
      sandbox="allow-scripts allow-same-origin"
    />
  );
};

export default VueInIframe;

使用方式：

// App.tsx
import React from 'react';
import VueInIframe from './VueInIframe';

const App: React.FC = () => {
  const handleVueReady = () => {
    console.log('Vue iframe 已加载');
  };

  return (
    <div>
      <h1>React 主应用</h1>
      
      <VueInIframe
        vueHtml={`
          <div>
            <h2>{{ message }}</h2>
            <p>这个 Vue 组件运行在独立的 iframe 中</p>
            <p>完全隔离，不会和 React 的依赖冲突</p>
          </div>
        `}
        height="200px"
        onLoad={handleVueReady}
      />
    </div>
  );
};

export default App;

6.3 iframe 方案的优缺点

优点 缺点
彻底隔离，无依赖冲突 通信需要通过 postMessage，有性能开销
Vue 组件有独立的全局作用域 样式隔离需要额外处理
适合第三方/不可控的 Vue 组件 SEO 不友好（如果涉及服务端渲染）
调试方便，可以独立打开 iframe 查看 体积稍大

七、通信方案：React 和 Vue 怎么传数据

这是最关键的问题。两个框架运行在不同的虚拟 DOM 世界里，怎么让它们”对话”？

方案一：Props 透传（最简单）

在 useVueComponent 中处理 props 变化：

// 改进的 Hook，支持 props 更新
export function useVueComponentWithProps(
  componentOptions: VueComponentOptions,
  props: Record<string, any>
): UseVueComponentReturn {
  const mountRef = useRef<HTMLDivElement>(null);
  const vueInstanceRef = useRef<Vue | null>(null);
  const propsRef = useRef(props); // 用 ref 保存最新 props

  useEffect(() => {
    propsRef.current = props;
  }, [props]);

  useEffect(() => {
    const options = {
      ...componentOptions,
      el: mountRef.current,
    };

    vueInstanceRef.current = new Vue(options);

    return () => {
      vueInstanceRef.current?.$destroy();
    };
  }, []);

  // 当 props 变化时，更新 Vue 实例的数据
  useEffect(() => {
    if (vueInstanceRef.current) {
      Object.entries(props).forEach(([key, value]) => {
        (vueInstanceRef.current as any)[key] = value;
      });
      vueInstanceRef.current.$forceUpdate();
    }
  }, [props]);

  return {
    mountRef,
    updateProps: (newProps: Record<string, any>) => {
      propsRef.current = { ...propsRef.current, ...newProps };
      if (vueInstanceRef.current) {
        Object.entries(propsRef.current).forEach(([key, value]) => {
          (vueInstanceRef.current as any)[key] = value;
        });
        vueInstanceRef.current.$forceUpdate();
      }
    },
    destroy: () => {
      vueInstanceRef.current?.$destroy();
      vueInstanceRef.current = null;
    },
  };
}

方案二：Event Bus 通信（适合松耦合）

// EventBus.ts
import Vue from 'vue';

// 创建一个全局的 Vue 事件总线
export const eventBus = new Vue();

// 在 React 侧使用
import { eventBus } from './EventBus';

// 发送事件
eventBus.$emit('react-to-vue', { data: 'hello from React' });

// 在 Vue 组件中监听
export const VueChartComponent = {
  created() {
    eventBus.$on('react-to-vue', (payload) => {
      console.log('收到 React 的消息:', payload);
    });
  },
  beforeDestroy() {
    // 记得清理监听器，防止内存泄漏
    eventBus.$off('react-to-vue');
  },
};

方案三：postMessage（iframe 场景）

// React 发送消息给 iframe 中的 Vue
const sendMessageToVue = (message: any) => {
  iframeRef.current?.contentWindow?.postMessage(message, '*');
};

// iframe 中的 Vue 接收消息
window.addEventListener('message', (event) => {
  const { data } = event;
  if (data.type === 'vue-update') {
    vm.$set(vm, 'chartData', data.payload);
  }
});

八、完整实战案例：带图表的管理后台

让我给你一个完整的、可以跑起来的项目结构。

project/
├── package.json
├── vite.config.ts
├── tsconfig.json
├── index.html
└── src/
    ├── main.tsx
    ├── App.tsx
    ├── components/
    │   ├── VueChart.tsx          # Vue 图表组件封装
    │   └── ReactDashboard.tsx    # React 主页面
    ├── hooks/
    │   └── useVueComponent.ts    # Vue 组件 Hook
    └── styles/
        └── index.css

package.json 关键依赖

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vue": "^2.7.14"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "typescript": "^5.0.0",
    "vite": "^4.4.0"
  }
}

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // 确保 Vue 只有一个实例
      vue: resolve(__dirname, 'node_modules/vue/dist/vue.esm.js'),
    },
  },
  build: {
    rollupOptions: {
      output: {
        // 分离 Vue 和 React 的 bundle
        manualChunks: {
          vue: ['vue'],
          react: ['react', 'react-dom'],
        },
      },
    },
  },
});

useVueComponent.ts（完整版）

import { useEffect, useRef } from 'react';
import Vue, { VueConstructor } from 'vue';

interface VueComponentOptions {
  el?: string | Element;
  template?: string;
  render?: (h: ReturnType<VueConstructor>['h']) => any;
  data?: Record<string, any> | (() => Record<string, any>);
  props?: string[];
  propsData?: Record<string, any>;
  methods?: Record<string, Function>;
  computed?: Record<string, any>;
  watch?: Record<string, any>;
  created?: () => void;
  mounted?: () => void;
  updated?: () => void;
  beforeDestroy?: () => void;
  destroyed?: () => void;
}

export interface UseVueComponentResult {
  ref: React.RefObject<HTMLDivElement>;
  getInstance: () => Vue | null;
  forceUpdate: () => void;
}

export function useVueComponent(
  options: VueComponentOptions,
  deps: any[] = []
): UseVueComponentResult {
  const containerRef = useRef<HTMLDivElement>(null);
  const instanceRef = useRef<Vue | null>(null);

  const getInstance = () => instanceRef.current;
  const forceUpdate = () => {
    instanceRef.current?.$forceUpdate();
  };

  useEffect(() => {
    if (!containerRef.current) return;

    // 销毁旧的实例
    if (instanceRef.current) {
      instanceRef.current.$destroy();
      instanceRef.current = null;
    }

    // 合并 options
    const mergedOptions = {
      el: containerRef.current,
      ...options,
    };

    // 创建 Vue 实例
    instanceRef.current = new Vue(mergedOptions as any);

    return () => {
      if (instanceRef.current) {
        instanceRef.current.$destroy();
        instanceRef.current = null;
      }
    };
  }, deps);

  return {
    ref: containerRef,
    getInstance,
    forceUpdate,
  };
}

VueChart.tsx

import React from 'react';
import { useVueComponent } from '../hooks/useVueComponent';

interface VueChartProps {
  data: { label: string; value: number }[];
  title: string;
  color?: string;
  height?: number;
}

const VueChart: React.FC<VueChartProps> = ({
  data,
  title,
  color = '#409EFF',
  height = 300,
}) => {
  const { ref, getInstance } = useVueComponent(
    {
      data: {
        chartData: data,
        chartTitle: title,
        chartColor: color,
        chartHeight: height,
      },
      template: `
        <div class="vue-bar-chart" :style="{ height: chartHeight + 'px' }">
          <h3 class="chart-title">{{ chartTitle }}</h3>
          <div class="chart-area">
            <div 
              v-for="(item, index) in chartData" 
              :key="index"
              class="bar-wrapper"
            >
              <div 
                class="bar" 
                :style="{ 
                  height: item.value + 'px',
                  backgroundColor: chartColor,
                  width: Math.max(20, (100 / chartData.length) - 2) + '%'
                }"
              ></div>
              <span class="bar-label">{{ item.label }}</span>
              <span class="bar-value">{{ item.value }}</span>
            </div>
          </div>
        </div>
      `,
      mounted() {
        console.log('[VueChart] 图表已渲染');
      },
    },
    [data, title, color, height]
  );

  return (
    <div ref={ref} className="vue-chart-container" />
  );
};

export default VueChart;

ReactDashboard.tsx

import React, { useState } from 'react';
import VueChart from '../components/VueChart';

const mockData = [
  { label: '周一', value: 120 },
  { label: '周二', value: 200 },
  { label: '周三', value: 150 },
  { label: '周四', value: 280 },
  { label: '周五', value: 220 },
  { label: '周六', value: 180 },
  { label: '周日', value: 160 },
];

const ReactDashboard: React.FC = () => {
  const [data, setData] = useState(mockData);
  const [title, setTitle] = useState('本周销售数据');
  const [color, setColor] = useState('#409EFF');

  const handleRandomize = () => {
    const newData = mockData.map((item) => ({
      ...item,
      value: Math.floor(Math.random() * 300) + 50,
    }));
    setData(newData);
  };

  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };

  const handleChangeColor = (e: React.ChangeEvent<HTMLInputElement>) => {
    setColor(e.target.value);
  };

  return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1 style={{ marginBottom: '24px' }}>React + Vue 混合仪表盘</h1>

      {/* React 控制面板 */}
      <div style={{ 
        background: '#f5f7fa', 
        padding: '16px', 
        borderRadius: '8px',
        marginBottom: '24px'
      }}>
        <h3 style={{ marginTop: 0 }}>控制面板（React 渲染）</h3>
        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
          <div>
            <label>标题：</label>
            <input 
              type="text" 
              value={title} 
              onChange={handleChangeTitle}
              style={{ padding: '6px 10px', borderRadius: '4px', border: '1px solid #dcdcdc' }}
            />
          </div>
          <div>
            <label>颜色：</label>
            <input 
              type="color" 
              value={color} 
              onChange={handleChangeColor}
              style={{ width: '40px', height: '30px', border: 'none' }}
            />
          </div>
          <button 
            onClick={handleRandomize}
            style={{
              padding: '8px 16px',
              background: '#409EFF',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            随机数据
          </button>
        </div>
      </div>

      {/* Vue 图表组件 */}
      <div style={{ 
        border: '1px solid #e4e7ed', 
        borderRadius: '8px',
        overflow: 'hidden'
      }}>
        <VueChart 
          data={data} 
          title={title} 
          color={color} 
          height={300} 
        />
      </div>

      {/* React 下方内容 */}
      <div style={{ marginTop: '24px', padding: '16px', background: '#fff' }}>
        <h3>数据统计</h3>
        <p>总销售额：<strong>{data.reduce((sum, item) => sum + item.value, 0)}</strong></p>
        <p>最高值：<strong>{Math.max(...data.map((item) => item.value))}</strong></p>
        <p>最低值：<strong>{Math.min(...data.map((item) => item.value))}</strong></p>
      </div>
    </div>
  );
};

export default ReactDashboard;

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>React + Vue 混合项目</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    
    /* Vue 组件样式 */
    .vue-bar-chart { padding: 20px; }
    .chart-title { font-size: 18px; margin-bottom: 16px; color: #303133; }
    .chart-area { display: flex; align-items: flex-end; justify-content: space-around; height: 220px; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
    .bar-wrapper { display: flex; flex-direction: column; align-items: center; flex: 1; }
    .bar { width: 100%; max-width: 40px; border-radius: 4px 4px 0 0; transition: height 0.3s ease; min-height: 4px; }
    .bar-label { font-size: 12px; color: #606266; margin-top: 8px; }
    .bar-value { font-size: 11px; color: #909399; margin-top: 4px; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

九、常见坑和解决方案

坑 1：Vue 实例没有正确销毁，导致内存泄漏

现象：多次切换页面后，浏览器内存持续上涨。

原因：React 组件卸载时，Vue 实例没有被 $destroy()。

解决：确保 useEffect 的 cleanup 函数中调用 $destroy()。

useEffect(() => {
  const vm = new Vue(options);
  instanceRef.current = vm;
  
  return () => {
    vm.$destroy(); // 必须调用
  };
}, []);

坑 2：Vue 的响应式数据在 React 更新后不同步

现象：React 更新了 props，但 Vue 组件没有重新渲染。

原因：Vue 2 的响应式系统只追踪它自己管理的数据，React 更新 props 不会触发 Vue 的重新渲染。

解决：使用 $forceUpdate() 或者通过 Vue.set 更新数据。

// 正确做法
const updateVueData = (newData: any) => {
  if (instanceRef.current) {
    // 方式一：直接赋值后用 $forceUpdate
    instanceRef.current.chartData = newData;
    instanceRef.current.$forceUpdate();
    
    // 方式二：用 Vue.set（适用于新增响应式属性）
    // Vue.set(instanceRef.current, 'chartData', newData);
  }
};

坑 3：Vue 的 $nextTick 在 React 环境中不生效

现象：在 React 的 setState 之后立即调用 Vue 的 $nextTick，拿到的是旧数据。

解决：Vue 的 $nextTick 依赖的是 Vue 自己的更新队列，在混合环境中不可靠。改用原生 requestAnimationFrame 或 setTimeout(0)。

// 不可靠
vueInstance.$nextTick(() => {
  // 可能拿到旧数据
});

// 可靠
setTimeout(() => {
  // 数据应该已经更新
}, 0);

// 或者用 requestAnimationFrame
requestAnimationFrame(() => {
  // 下一帧执行
});

坑 4：Vue 组件的 CSS 和 React 项目的 CSS 冲突

现象：Vue 组件的样式影响了 React 的布局，或者反之。

解决：

  1. 给 Vue 组件的容器加上唯一的前缀 class
  2. 使用 CSS Modules 或 scoped 样式
  3. 或者用 iframe 彻底隔离
/* Vue 组件样式加上前缀 */
.vue-chart-container .vue-bar-chart { ... }
.vue-chart-container .chart-title { ... }

坑 5：Vue 2 和 Vue 3 同时存在时的版本冲突

现象：某些 Vue 插件只支持 Vue 2，但项目引入了 Vue 3 的包。

解决：

# 锁定 Vue 版本，防止自动升级
npm install vue@2.7.14 --save

在 vite.config.ts 中强制使用 Vue 2：

export default defineConfig({
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm.js', // 指向 Vue 2
    },
  },
});

十、生产环境的最佳实践

10.1 监控和错误处理

// 在生产环境中增加错误边界
import { Component, ErrorInfo, ReactNode } from 'react';

class VueComponentErrorBoundary extends Component<{
  children: ReactNode;
  fallback?: ReactNode;
}> {
  state = { hasError: false };

  static getDerivedStateFromError(): { hasError: boolean } {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('[Vue Component Error]:', error, errorInfo);
    // 上报错误到监控系统
    // reportError(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <div>Vue 组件加载失败</div>;
    }
    return this.props.children;
  }
}

使用：

<VueComponentErrorBoundary>
  <VueChart data={data} title={title} />
</VueComponentErrorBoundary>

10.2 性能优化

  1. 延迟加载 Vue 组件：使用 React.lazy 和动态导入
const VueChart = React.lazy(() => import('./VueChart'));

// 使用时
<Suspense fallback={<div>加载中...</div>}>
  <VueChart data={data} title={title} />
</Suspense>

  1. 减少 Vue 实例的数量：不要在列表的每个 item 中创建一个 Vue 实例，而是在外层创建一个，通过 props 控制内容。

  2. 使用 Web Worker：如果 Vue 组件计算量大，可以考虑在 Worker 中运行。

10.3 打包优化

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 把 Vue 单独打包，避免和 React 混在一起
          vue: ['vue'],
          react: ['react', 'react-dom'],
          // 如果有多个 Vue 组件库，也可以单独打包
          vue-charts: ['v-charts', 'echarts'],
        },
      },
    },
  },
});

十一、总结：如何选择方案

场景 推荐方案 理由
简单展示，少量 Vue 组件 useVueComponent Hook 简单直接，易于维护
需要彻底隔离，避免依赖冲突 iframe 方案 隔离最彻底
React 和 Vue 需要频繁通信 Event Bus + Props 透传 通信灵活
Vue 组件是第三方库，不能修改 iframe + postMessage 隔离+通信兼顾
长期项目，Vue 组件会越来越多 逐步迁移到 React 长远考虑

最后说两句

我写这篇文章的时候，脑子里想的是上个月那个焦虑的下午——老板说”三天上线”，而那个 Vue 图表组件改不了。我试了五种方案，踩了十几个坑，最后用 useVueComponent 这个 Hook 搞定了。

混合框架不是长久之计，它是个过渡方案。但过渡期可能很长，长到你需要一个稳定可靠的混用方案。

希望这篇文章能帮你省下我踩过的时间。如果有任何问题，欢迎在评论区交流——虽然我不能回复，但你可以把这个方案贴给同事看看，一起完善。

记住：能迁移就迁移，实在迁移不了再混用。这句话说了三遍也不嫌多。

-- 展开阅读全文 --