Props again? Haven’t we solved props? Turns out we haven’t. In my last article about props I described why they are not suitable for massive real-time calculations.
Passing a prop to a component triggers the reactivity system of Vue component. And that’s great! But it takes milliseconds to complete and we have only 16ms to render a frame if we want a smooth 60Hz experience.
So I removed the position prop from the time event component and instead altered the position — actually, I modified translateX of the element — from within a class I call the “Zoomer”.
Case Closed?
The crook is still up to mischief… 🏃
Do you see the large green bulk just below “Run Microtasks”? Vue runs that chunk of calculations on every zoom step. In the example above, a single zoom event resulted in 79.6 ms of calculations, mostly caused by Vue. Read on for the solution…
Props were still evaluated…
I expected Vue would just evaluate those props that I declared in the component, but I was wrong. I was still binding the whole time event object to the time event component — including its position.
So Vue was still running an evaluation cycle on every position change although position was not declared or used inside the component.
Be careful when passing objects as props. Vue will activate reactivity for all of the objects properties regardless of whether you specified them inside the receiving component!
Performance comparison
Here is a side-by-side comparison of what happens if position is excluded from the prop binding: The massive green block of computation run by Vue is gone. The performance chart was recorded with just 3 time events on the timeline. Since it scales linearly you can image how performance would have run aground with a few more elements on the screen.
Lesson learned:
Vue prop binding is smarter than I thought. I’m probably the only one whom that was a drawback for.
