在 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 规范，且明确规避响应式系统。
✅ 验证是否生效
执行搜索后，检查：
-
node.data.IsHighlighted值已正确变更（可在控制台打印验证）； -
getStroke()函数返回值随IsHighlighted实时变化； - 图表无需拖动即立即重绘高亮边框。
遵循以上原则，即可彻底解决 GoJS 在 Vue 3 中“事务已提交但视图不更新”的经典陷阱。核心思想始终如一：GoJS 对象的生命期和引用完整性，必须由开发者严格守护，不可交由框架代理干预。
