如何解决在vue2项目中使用AntV x6时渲染边使用'double-edge'失效问题

在AntV X6中，使用双向边时需要设置edge.type属性为'double-edge'，但在Vue2项目中使用时，可能会出现双向边无法正确渲染的问题。这是因为Vue2使用的是双向数据绑定，会在组件内部创建一个新的对象，而AntV X6中的双向边需要在源节点和目标节点之间创建两条边，这两条边的ID必须相同，但是由于组件内部创建了新的对象，导致ID不一致，从而出现渲染问题。

解决这个问题的方法是，在创建节点和边的时候，手动指定ID，保证源节点和目标节点之间的双向边ID相同。具体实现方法如下：

import { Graph, Edge } from '@antv/x6'

const graph = new Graph({
  container: '#graph-container',
  width: 800,
  height: 600,
})

// 手动指定边的ID
const edge = new Edge({
  source: { x: 100, y: 100 },
  target: { x: 300, y: 100 },
  attrs: {
    line: {
      stroke: '#a0a0a0',
      strokeWidth: 1,
      targetMarker: {
        name: 'classic',
        size: 8,
      },
    },
  },
  router: {
    name: 'manhattan',
  },
  connector: {
    name: 'normal',
  },
  zIndex: 0,
  id: 'double-edge', // 手动指定ID
})

// 添加边到图中
graph.addEdge(edge)

// 获取边
const edgeById = graph.getEdgeById('double-edge')

在创建节点时同样需要手动指定ID，保证节点之间的连接正确。