最近在重构项目的过程中，需要实现数据流图，项目原先是使用angualr框架来实现的，用到了jsplumb这个插件，并封装了一些组件，所以在重构的过程中也是按照这个思路来进行重构。

流图的代码结构

按照思路，将流图封装成这几个组件，并一层层嵌套。

<dataCanvas>
	<dataObject v-for="object in objects">
		<dataEndpoint>
			<dataConnect>
			</dataConnect>
		</dataEndpoint>
	</dataObject>
</dataCanvas>

dataCanvas里面 主要是进行画布的缩放，主要通过调用jsplumb实例setZoom(zoom)和改变zoom缩放级别来实现，同时禁用掉mousescroll事件，监听mousewheel事件来实现缩放。
dataObject里面主要是进行节点的拖拽：通过jsplumb实例的drag方法来实现；
dataEndpoint里面主要是新增端点： 通过jsplumb实例的addEndpoint方法来实现；
dataConnect里面主要是新增连线： 通过读取父组件上绑定的id来去target和source，最终通过这两个id来连线。

遇到的问题

1. 在连线之前，必须端点已经mounted了才能连：
   这个其实要求对VUE组件的生命周期要比较了解，父组件的created要先于子组件，但mounted是在子组件mounted之后。
   所以在dataConnect组件中，连线时要在nextTick再连。

2. 流图更新时，主要是改变objects数据的，在VUE中，一旦使用v-for，就要加key来避免VUE的复用问题。但是在这种情况下，我们加了key，但是更新还是出现了不可描述的问题，因为在更新时，VUE还是复用了一部分节点，因为在更新时，数组中的有些节点是没有变的，这就导致有些节点不会再mounted，这就造成连线时会出现BUG，所以这里要保证每一次更新时，每一个节点都与上次渲染的节点不一样，这样才能保证所有的节点重新mounted。

这个问题困扰了很久，最后这种涉及多个组件对某一数据进行修改的场景，建议使用vuex来管理，因为一不小心就会造成数据乱掉的问题。