在 Vue 3 中使用 GoJS 时，若将 Diagram 实例声明为响应式数据（如放入 data() 或 ref()/reactive()），Vue 的 Proxy 会拦截对 GoJS 内部对象的访问，导致绑定更新失效、界面不重绘——这是图表无法实时响应 IsHighlighted 等属性变更的根本原因。
在 vue 3 中使用 gojs 时，若将 `diagram` 实例声明为响应式数据（如放入 `data()` 或 `ref()`/`reactive()`），vue 的 proxy 会拦截对 gojs 内部对象的访问，导致绑定更新失效、界面不重绘——这是图表无法实时响应 `ishighlighted` 等属性变更的根本原因。
✅ 正确做法：确保 GoJS 实例完全脱离 Vue 响应式系统
GoJS 的 Diagram、Node、Link 及其数据对象（如 node.data）必须是非响应式的纯 JavaScript 对象。Vue 3 的 reactive() 和 ref() 会对嵌套对象进行深度代理，而 GoJS 内部依赖原始对象引用和属性访问器（如 Object.defineProperty），一旦被 Vue 代理，go.Binding 就无法正确监听属性变化，从而导致 UI 不更新（例如 IsHighlighted 改变后边框颜色不变，需手动拖动节点才刷新）。
? 修复步骤（以 Options API 为例）
-
❌ 错误写法（触发问题）
export default { data() { return { myDiagram: null, // ❌ 响应式 ref，会导致 GoJS 对象被 proxy 包裹 searchQuery: '' } } } -
✅ 正确写法（推荐）
在mounted()中初始化并直接挂载到this，跳过响应式追踪：mounted() { const myDiagram = $(go.Diagram, this.$refs.goJsDiagram, { initialContentAlignment: go.Spot.Top, "undoManager.isEnabled": false, layout: $(CustomLayeredDigraphLayout, { direction: 90, layerSpacing: 50 }) }); // ✅ 关键：直接赋值，不经过 data() / reactive() this.myDiagram = myDiagram; // 设置 nodeTemplate（保持原逻辑） myDiagram.nodeTemplate = $(go.Node, "Vertical", $(go.Panel, "Auto", $(go.Shape, "Rectangle", { strokeWidth: 2, fill: "white" }, new go.Binding("stroke", "", (data) => this.getStroke(data)).ofObject() ), $(go.TextBlock, { margin: new go.Margin(28, 22, 28, 22), font: "bold 22px sans-serif", stroke: "black" }, new go.Binding("text", "Name") ) ) ); } -
✅ 搜索高亮函数优化（含事务规范）
注意：startTransaction和commitTransaction必须成对调用，且只需一次事务包裹全部操作（原代码中重复调用了startTransaction，未调用commitTransaction，属于严重逻辑错误）：findNodeByName(name) { const diagram = this.myDiagram; if (!diagram) return false; diagram.startTransaction('highlight-search'); // ✅ 单次事务开始 diagram.nodes.each(node => { const matches = name && node.data.Name?.toLowerCase().includes(name.toLowerCase()); const shouldHighlight = matches; // 仅当状态实际改变时更新，避免冗余 setDataProperty if (node.data.IsHighlighted !== shouldHighlight) { diagram.model.setDataProperty(node.data, "IsHighlighted", shouldHighlight); } }); diagram.commitTransaction('highlight-search'); // ✅ 必须提交事务 return true; } -
✅
getStroke函数无需改动（已正确）getStroke(node) { if (node.data.IsHighlighted) return "yellow"; if (node.data.IsSelected) return "green"; return "black"; }
⚠️ 补充注意事项
-
禁止将 GoJS 对象存入
ref()/reactive()/computed()：包括myDiagram,node.data,model, 甚至从diagram.nodes遍历出的node实例。 -
数据源建议解耦：维护一份独立的非响应式数据数组（如
this.graphData = [...]），通过diagram.model.nodeDataArray = this.graphData同步；后续修改this.graphData[i].IsHighlighted = true后，再调用diagram.model.commitTransactions()或单次setDataProperty。 -
调试技巧：在控制台打印
node.data.constructor，若输出Proxy则说明已被 Vue 代理，需立即修正初始化方式。 -
Composition API 用户注意：不要用
ref(myDiagram)或reactive({ diagram })，应使用let myDiagram = null+onMounted(() => { myDiagram = ... })，并通过getCurrentInstance().proxy（不推荐）或更优的 provide/inject 方式暴露。
遵循以上原则，GoJS 绑定即可正常响应数据变更，搜索高亮将即时生效，无需任何手动刷新或“抖动”触发重绘。
立即学习“前端免费学习笔记（深入）”；
