G6 5.x 在 Vue 3 中的集成指南从挂载渲染到生命周期与数据更新【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6导读本文基于当前仓库packages/site/docs/manual/getting-started/integration/vue.zh.md及 G6 5.x 核心源码系统讲解如何在 Vue 3 项目中接入 G6antv/g6当前仓库版本为 5.1.1图可视化框架。你将掌握在onMounted中创建Graph实例并渲染的基础写法、为什么不能把 Vue 响应式数据直接交给 G6、如何在组件卸载时正确销毁实例以避免内存泄漏以及数据更新与容器尺寸管理的完整实战方案。全文代码均可直接复制运行并配有仓库源码级的原理佐证。:::warning{title注意} 请不要将 Vue 响应式数据直接传递给 G6 实例这可能会导致 G6 无法正确渲染甚至导致页面崩溃。 :::一、准备工作安装 G6在 Vue 3 项目Vite / Webpack 均可中首先安装 G6 核心包npm install antv/g6G6 5.x 采用按模块打包与多端输出main/module/types分别指向lib、esm、distVue Vite 场景下会自动命中 ESM 构建产物详见 packages/g6/package.json。若你的项目使用 TypeScript类型声明随包自带无需额外安装类型库。本文示例使用 Vue 3 的script setup语法与组合式 APIonMountedVue 2 的 Options API 写法思路相同在mounted钩子中创建实例在beforeDestroy中销毁。二、最小可运行示例在 Vue 组件中渲染 G6参考官方文档嵌入的vue-snippet示例packages/site/common/vue-snippet.md在 Vue 3 中的最小集成代码如下template div idcontainer/div /template script setup import { onMounted } from vue; import { Graph } from antv/g6; onMounted(() { const graph new Graph({ container: document.getElementById(container), width: 500, height: 500, data: { nodes: [ { id: node-1, style: { x: 50, y: 100 }, }, { id: node-2, style: { x: 150, y: 100 }, }, ], edges: [{ id: edge-1, source: node-1, target: node-2 }], }, }); graph.render(); }); /script运行后页面上会出现两个通过一条边连接的节点。下面对代码要点逐一拆解模板容器div idcontainer/div是 G6 挂载的宿主节点。G6 会在其中创建画布Canvas因此该 div 必须真实存在于 DOM 中。container配置项既支持传入 DOM 元素如document.getElementById(container)也支持传入 CSS 选择器字符串如container。从源码看CanvasOptions.container 的类型为string | HTMLElement | Canvas未设置width/height时会自动获取容器尺寸。data配置以节点nodes 边edges的图数据结构初始化边的source/target引用节点id。graph.render()必须显式调用渲染方法图才会真正绘制到画布上快速开始文档中同样遵循此模式见 packages/site/docs/manual/getting-started/quick-start.zh.md。在 Vue 中初始化 G6 的关键原则不要在模板渲染前创建实例onMounted是创建Graph的推荐时机因为此时容器div已被 Vue 挂载到真实 DOMdocument.getElementById(container)才能取到元素如果放在setup顶层或onBeforeMount中执行容器尚未渲染完成G6 将无法定位画布宿主节点。这也是官方在onMounted回调中创建实例、而不是在组件初始化阶段创建的根本原因。三、警告剖析为什么不能把 Vue 响应式数据直接传给 G6文档开篇给出了重要警告请不要将 Vue 响应式数据直接传递给 G6 实例这可能导致 G6 无法正确渲染甚至导致页面崩溃。原因可以从 G6 的运行时架构理解响应式代理干扰 G6 内部数据结构Vue 3 的ref/reactive基于 Proxy 对对象进行代理当代理对象被写入 G6 的图数据模型DataController见 packages/g6/src/runtime/data.ts后G6 内部对节点、边对象的频繁读写会触发 Vue 的依赖收集与派发更新产生大量无意义的响应式开销极端情况下会造成性能雪崩甚至栈溢出导致页面崩溃。变更追踪机制冲突G6 拥有自己独立的图数据变更与重渲染机制setData会自动计算数据差异并驱动元素更新见 packages/g6/src/runtime/graph.ts。Vue 的响应式系统与 G6 的差异计算相互叠加会导致双重更新、渲染结果不一致。推荐做法将 G6 需要的数据在传入前“脱敏”为普通对象。例如import { reactive } from vue; import { Graph } from antv/g6; const rawData reactive({ nodes: [], edges: [] }); // 传入前用结构化克隆剥离响应式代理 const graphData JSON.parse(JSON.stringify(rawData)); // 或者const graphData toRaw(rawData); onMounted(() { const graph new Graph({ container: container, data: graphData }); graph.render(); });如果需要在业务代码中维护图数据与 Vue 状态的一致性推荐单向数据流业务状态Vue 响应式→ 计算普通对象 → 调用graph.setData(...)更新 G6而不要让 G6 直接持有响应式对象。四、进阶完整生命周期管理创建 → 更新 → 销毁4.1 在 onUnmounted 中销毁实例G6 的Graph实例会绑定 DOM 事件、动画帧任务、布局与插件等资源destroy会依次销毁 plugin、behavior、layout、animation、element、model、canvas 等运行时模块见 packages/g6/src/runtime/graph.ts。组件卸载时不销毁实例会留下无法回收的监听器与画布资源。因此完整写法应为script setup import { onMounted, onUnmounted, ref } from vue; import { Graph } from antv/g6; const containerRef ref(null); let graph null; onMounted(() { graph new Graph({ container: containerRef.value, data: { nodes: [{ id: node-1, style: { x: 50, y: 100 } }], edges: [], }, }); graph.render(); }); onUnmounted(() { graph?.destroy(); graph null; }); /script template div refcontainerRef stylewidth: 500px; height: 500px/div /template这里改用模板引用refcontainerRef获取容器比document.getElementById更符合 Vue 的声明式风格也避免多个组件共存时的 id 冲突。destroy()之后实例不可复用官方注释明确“销毁后无法进行任何操作如果需要重新使用需要重新创建一个新的图实例”见 packages/g6/src/runtime/graph.ts并通过graph.destroyed标志标识状态。4.2 异步数据更新配合 setData 与 watch真实业务中图数据往往来自接口更新时推荐使用graph.setData()设置全量数据会替换当前图数据并自动计算差异见 packages/g6/src/runtime/graph.tsscript setup import { onMounted, ref, watch } from vue; import { Graph } from antv/g6; const containerRef ref(null); const sourceData ref({ nodes: [], edges: [] }); // 仅作为业务状态不直接交给 G6 let graph null; onMounted(async () { graph new Graph({ container: containerRef.value }); const res await fetch(/api/graph); sourceData.value await res.json(); // 传入普通对象而非响应式代理 graph.setData(JSON.parse(JSON.stringify(sourceData.value))); graph.render(); }); watch(sourceData, (val) { if (graph) { graph.setData(JSON.parse(JSON.stringify(val))); graph.render(); } }, { deep: true }); onUnmounted(() graph?.destroy()); /script要点回顾watch监听的是 Vue 侧的普通状态如sourceData而 G6 内部始终持有通过JSON.parse(JSON.stringify(...))脱敏后的普通对象从源头规避了警告所述问题。4.3 容器尺寸适配G6 的width/height未设置时会自动读取容器尺寸见 packages/g6/src/spec/canvas.ts因此推荐通过 CSS 控制容器大小并配合autoFit或fitView自动适配视口。例如template div refcontainerRef classgraph-container/div /template style scoped .graph-container { width: 100%; height: 500px; } /stylenew Graph({ container: containerRef.value, autoFit: view, // 自动缩放使图内容适配视口 data, });五、与其他框架集成的横向对照当前仓库packages/site/docs/manual/getting-started/integration/目录下同时提供了 React、Angular 的官方集成文档react.zh.md、angular.zh.md。它们的核心模式与 Vue 完全一致React在useEffect中创建 Graph 实例用 ref 保存并在清理函数中销毁严格模式下还需注意 React 18 的“挂载-卸载-再挂载”行为见 react.zh.md。Vue在onMounted中创建在onUnmounted中销毁即本文演示的写法。本质都是“在框架生命周期钩子内手动管理 G6 实例的创建与销毁”因为 G6 是命令式渲染的图框架不依赖任何前端框架的虚拟 DOM 机制。六、配套资源与常见问题在线示例官方提供 G6 in Vue 的可运行在线 DemoStackBlitz文件为src/App.vue可直接在浏览器中编辑预览便于快速验证上述写法。框架无关入门如果不使用框架可直接在 HTML 中通过script src...g6.min.js/script引入并渲染见快速开始。更多图配置节点样式、边样式、布局、交互行为的完整配置项可查阅GraphOptions类型定义packages/g6/src/spec/graph.ts 及 packages/g6/src/spec 目录。官方封装方案如需更完善的 React 集成官方文档推荐 AntV 的antv/graphin见 react.zh.mdVue 侧目前建议直接采用本文的实例管理模式。常见问题速查问题原因解决图不渲染容器为空白实例在容器挂载前创建或未调用render()在onMounted中创建并调用graph.render()页面崩溃 / 性能骤降把 Vue 响应式代理对象直接交给 G6传入前用JSON.parse(JSON.stringify(...))或toRaw脱敏组件切换后内存持续增长未在卸载时销毁实例onUnmounted中调用graph.destroy()路由切换后旧图残留同一容器 id 被多个实例复用使用ref模板引用 卸载销毁以上方案均以当前仓库 G6 5.1.1 的源码与官方文档为据可直接落地到你的 Vue 3 项目中。【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
