GoJS 图表更新失效问题的解决方案：避免 Vue 3 响应式代理干扰-js教程-PHP中文网

GoJS 图表更新失效问题的解决方案：避免 Vue 3 响应式代理干扰

在 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 函数无需改动（已正确）

Json Repair Kit
使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载
```
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 方式暴露。