最近在重構項目的過程中，需要實現數據流圖，項目原先是使用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來連線。
遇到的問題
-
在連線之前，必須端點已經mounted了才能連：
這個其實要求對VUE組件的生命週期要比較瞭解，父組件的created要先於子組件，但mounted是在子組件mounted之後。
所以在dataConnect組件中，連線時要在nextTick再連。 -
流圖更新時，主要是改變objects數據的，在VUE中，一旦使用v-for，就要加key來避免VUE的複用問題。但是在這種情況下，我們加了key，但是更新還是出現了不可描述的問題，因爲在更新時，VUE還是複用了一部分節點，因爲在更新時，數組中的有些節點是沒有變的，這就導致有些節點不會再mounted，這就造成連線時會出現BUG，所以這裏要保證每一次更新時，每一個節點都與上次渲染的節點不一樣，這樣才能保證所有的節點重新mounted。
這個問題困擾了很久，最後這種涉及多個組件對某一數據進行修改的場景，建議使用vuex來管理，因爲一不小心就會造成數據亂掉的問題。