Having some confusing performance issues related to component teardown

I am unable to share this project’s code, but I’m looking for some help interpreting performance graphs. I have a large Vue SPA (vue-router, vuex) that I’ve been working on for over 2 years now (made many performance improvements over time), but I’m a bit stuck on this one.

This is a simple page in the app, let’s call it screen A:

Screen A itself isn’t too slow, but moving from screen A to 2 other screens, (let’s call them screens B and C) isn’t as snappy as it should be.

Screen A to B - decently fast
Screen A to C - pretty slow (C is more complex)

So using Chrome’s performance tools and Vue’s performance tools I began to try and debug what was happening. I noticed that teardown() and $destroy() were taking the longest when moving from screen A to screens B/C. What surprised me though was that the time spent in these functions changed based on what screen I was going to

Screen A to B

Screen A to C

I was careful to make sure the testing environment was consistent for both transitions. I already have keep-alive implemented to cache the parent component based on the route, but the teardown() and $destroy() calls are impacting the nested components (the 3 rows in my first screenshot), if I enabled a 4th row you see a 4th teardown() call in this row:

So I guess my main question is - why does what screen I’m rendering next affect the speed of destroying screen A’s children components? It makes sense why going from screen A to C takes longer, but intuitively I’d expect to see that reflected in this part of the performance graph, not in the destroy/teardown part:

Am I completely reading this performance graph incorrectly?

Just bumping this in hopes that someone will have a solution. I’ve been able to pinpoint the problem to some very slow removeSub calls - but I don’t understand why those are taking so long.

Shameless bump, still looking for solutions or just general info on component teardown. Been looking at Vue’s source code but haven’t had any revelations.

Another bump

Bump. Done a lot more debugging to no avail. On Vue 2.6.11 but problem seems to be agnostic to recent versions. Optimized the mounting so now the component teardown is even more disproportionate to everything else.