💻 Tech
In Vue, onMounted() is a lifecycle hook that is called when the component is mounted. A component is mounted when it is inserted into the DOM. But it doesn’t mean that the data used in the component are ready. A bug I worked on recently was that a UI placement calculation was off, specifically, the components that dynamically change their height. After some debugging, I found out that the values used for the computation were already set at onMounted(), not accounting for the fact that some components are still loading their data.
One debugging technique that helped:
If the issue involves UI placement, it helps to compare the values used by code versus the actual values in the DOM. The latter can be inspected via the browser’s dev tools like using document.querySelector() or using the Vue dev tools.
🛡️Stoicism
Clarity is an important virtue that we tend to overlook. A key question we can ourselves is: “Is this thing I’m doing aligned with my values and principles?” Anything else is background noise. If we can visualize with a clear mind where we want to go and what obstacles we might encounter, we make life easier for ourselves.