g6算是个蛮知名的流程图引擎吧，比echarts难一点，不过多试几次也能上手。最近在使用它做二次开发做自定义流程图，用到它自定义图项的功能，结合vue一起来使用，踩到了“vue 双向数据绑定对Object（map）、list数据变更不敏感”的坑。
g6自定义节点的方式如下教程所示：https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/custom-node。
在实际使用中，我用this.$refs.vueFlowchartEditor.propsAPI.update来更新图项数据和状态，此时会触发自定义图项里的draw()方法。在第一次将自定义图项从菜单里拖出来的时候，图项能根据预设的数据（主要使用了一个Object来表示关键数据）自行更新。但是在编辑了数据之后，图项不能根据已经变更后的Object来自行更新。
初次更新的调用栈：
draw (stop-flow-update.vue?b56e:330)
e._drawInner (vue-flowchart-editor.common.js?bc4c:347)
e.draw (vue-flowchart-editor.common.js?bc4c:347)
e.update (vue-flowchart-editor.common.js?bc4c:347)
(anonymous) (vue-flowchart-editor.common.js?bc4c:347)
e._updateItems (vue-flowchart-editor.common.js?bc4c:347)
e.update (vue-flowchart-editor.common.js?bc4c:347)
update (vue-flowchart-editor.common.js?bc4c:4374)
_this.<computed> (vue-flowchart-editor.common.js?bc4c:10795)
updateCurrentItemModel (stop-flow-update.vue?b56e:748)
invoker (vue.runtime.esm.js?2b0e:2023)
Vue.$emit (vue.runtime.esm.js?2b0e:2534)
handleClickLink (iview.js?e069:8924)
invoker (vue.runtime.esm.js?2b0e:2023)
fn._withTask.fn._withTask (vue.runtime.esm.js?2b0e:1822)
第二次更新关键数据的Object时的调用栈：
updateCurrentItemModel (stop-flow-update.vue?b56e:749)
invoker (vue.runtime.esm.js?2b0e:2023)
Vue.$emit (vue.runtime.esm.js?2b0e:2534)
handleClickLink (iview.js?e069:8924)
invoker (vue.runtime.esm.js?2b0e:2023)
fn._withTask.fn._withTask (vue.runtime.esm.js?2b0e:1822)
发现关键在于
this.$refs.vueFlowchartEditor.propsAPI.update 没能按期望的触发。
推测是因为vue的双向数据绑定的坑。所以在目标数据里加了个根据Object来变化的String变量，来让vue的双向绑定机制能正常生效。
比如原来的数据：
let data1= {"data":{"key1":"1"}}
data1 = {"data":{"key1":"1","key2":"2"}}
当data1出现上述变化的时候，其实vue是没能自动检测到的。所以我改成下面这样
let data1= {"data":{"key1":"1"},"jsonStr":JSON.stringify(JSONObject)}
增加一个json字符串的变量，每次JSON objec有变化时，其对应的json字符串都会有相应变化，而vue的双向绑定，对于字符串的变更是能自动检测到的，此时就能正常触发update- >draw（），重绘自定义图项。
网友评论