An example of force-directed D3 with Vue.js, based on two gists @JMStewart for comparability:
Vue.js is by far a lot slower than its counterparts. There are probably techniques that could be used to speed things up. In fact this is what I tried with using force.stop()
on the beforeUpdate hook and its companion on the updated hook. However, this did not noticably speed up the simulation compared to just running force.start()
at the beginning.
Even though Vue.js batch applies updates through an asycnronous queue and I am stopping and starting simulation updates between Vue.js updates, the Vue.js updates still slow down the simulation.
With more work the two could probably be brought more in sync, but with so much work what's the point?
For me this means that there is no point mixing D3 with another library in the same component.
However if you want to see an example that works you can see an article @johnnynotsolucky wrote: Composing D3 Visualizations With Vue.js
Open the console to see performance logs.