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

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

在 vue 3 中将 gojs diagram 实例声明为响应式数据会导致其内部对象被 proxy 包裹，破坏 gojs 的数据绑定与重绘机制，从而引发事务提交后界面不刷新的问题。正确做法是将 diagram 实例设为非响应式属性。

在 vue 3 中将 gojs diagram 实例声明为响应式数据会导致其内部对象被 proxy 包裹，破坏 gojs 的数据绑定与重绘机制，从而引发事务提交后界面不刷新的问题。正确做法是将 diagram 实例设为非响应式属性。

GoJS 是一个高度依赖对象引用一致性和手动触发更新的可视化库，而 Vue 3 默认使用 Proxy 对 data() 返回的对象进行深度响应式处理。一旦你将 myDiagram（或其节点、链接等子对象）放入 data() 或 ref()/reactive() 中，Vue 会对其做代理封装——这会干扰 GoJS 内部的 model.setDataProperty 通知机制，导致绑定（如 stroke）无法及时重新求值，视觉状态（如高亮边框）自然不会更新，除非触发强制重绘（例如拖动节点）。

✅ 正确初始化方式（Vue 3 Composition API 示例）

import { onMounted, getCurrentInstance } from 'vue'

export default {
  setup() {
    let myDiagram = null // 非响应式局部变量

    onMounted(() => {
      // 创建 Diagram 实例（注意：不放入 reactive 或 ref）
      myDiagram = $(go.Diagram, document.getElementById('myDiagramDiv'), {
        initialContentAlignment: go.Spot.Top,
        "undoManager.isEnabled": false,
        layout: $(CustomLayeredDigraphLayout, {
          direction: 90,
          layerSpacing: 50
        })
      })

      myDiagram.nodeTemplate = $(go.Node, "Vertical",
        $(go.Panel, "Auto",
          $(go.Shape, "Rectangle", {
              strokeWidth: 2,
              fill: "white"
            },
            new go.Binding("stroke", "", (data) => getStroke(data))
          ),
          $(go.TextBlock, {
              margin: new go.Margin(28, 22, 28, 22),
              font: "bold 22px sans-serif",
              stroke: "black"
            },
            new go.Binding("text", "Name")
          )
        )
      )

      // 将实例挂载到组件实例上（仅用于后续方法访问），确保非响应式
      const instance = getCurrentInstance()
      if (instance) {
        instance.proxy.$myDiagram = myDiagram // ✅ 推荐：挂载到 proxy（非响应式）
        // 或更安全地：instance.appContext.config.globalProperties.$myDiagram = myDiagram
      }
    })

    // 搜索并高亮节点（使用非响应式 diagram 实例）
    const findNodeByName = (name) => {
      const diagram = myDiagram
      if (!diagram) return false

      diagram.startTransaction('highlight-search') // ⚠️ 单次事务包裹全部操作

      let found = false
      diagram.nodes.each(node => {
        const match = name && node.data.Name?.toLowerCase().includes(name.toLowerCase())
        const shouldHighlight = match && !node.data.IsHighlighted
        const shouldUnhighlight = !match && node.data.IsHighlighted

        if (shouldHighlight) {
          diagram.model.setDataProperty(node.data, "IsHighlighted", true)
          found = true
        } else if (shouldUnhighlight) {
          diagram.model.setDataProperty(node.data, "IsHighlighted", false)
        }
      })

      diagram.commitTransaction('highlight-search') // ✅ 显式提交事务
      return found
    }

    // 辅助函数：独立于 this，避免闭包捕获响应式上下文
    const getStroke = (data) => {
      if (data.IsHighlighted) return "yellow"
      if (data.IsSelected) return "green"
      return "black"
    }

    return { findNodeByName }
  }
}

⚠️ 关键注意事项

禁止将 myDiagram 放入 data()、ref()、reactive() 或 computed()：否则 Vue 会劫持其属性访问，破坏 GoJS 内部的 invalidate 和 updateTarget 流程。
事务必须成对调用：startTransaction() / commitTransaction() 应包裹所有相关 setDataProperty 调用，而非每个节点单独开启事务（你原代码中重复调用了 startTransaction，且未 commit，这是严重错误）。
getStroke 必须是纯函数且无 this 依赖：避免闭包引用 Vue 响应式对象；建议定义为独立函数或 const 常量。
Vue 3 中推荐使用 getCurrentInstance() 挂载 diagram：比 this.myDiagram = ... 更符合 Composition API 规范，且明确规避响应式系统。