Vue 2 reactivity - passing props vs updating data


I’m currently using Vue 2 with Laravel Echo to listen to incoming data stream via websocket (e.g. every 5 seconds) and display it on several widgets (e.g. 10-20) from a single Vue component. My goal is to minimize the latency for Vue to display the data since it was received by Laravel Echo. Right now, I’ve come across 2 methods and am wondering if one is better suited to achieve my goal, or if there’s a better way.

  1. Place the Laravel Echo listen in the App.vue and pass the incoming data stream as props (object) to the widget component
  2. Place the Laravel Echo listen in the widget component and update the data (object) in that component

I understand that in no.2, as the number of my widget grows, so will the number of listens from Laravel Echo. However, I feel that it has lower latency than no.1, judging by looking at how the data displayed in the browser.

a) Is there a way to more accurately test the latency between no.1 and 2?

b) If my hypothesis is true, is it because in no.2 the data update takes place within the component, hence it’s faster than in no.1 where the data update needs to go through props?

c) If it’s true that no.2 takes more less time for Vue to update the data displayed in the browser, would this latency slowly increase to a point where it becomes worse than that of no.1 as the number of widgets increases?

Would really appreciate any helps or tips provided.



Potentially. What props do is guard against unnecessary re-renders. If the (primitive) prop passed down has the same value as before, it will not cause the component to re-render. And of course, they also help with abstraction so your components can remain modular.

Got it. But are there any differences in terms of how fast Vue reacts to changes passed down via props vs. from data object update within the component?



I’ve not seen any benchmarks, but from experience I would say no, or if there is any impact it’s negligible.