011. The Component Lifecycle
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
A component is instantiated, its template is compiled, it is attached to the DOM (mounted), it updates when data changes, and finally, it is destroyed (unmounted). Vue gives you hooks to run code at each of these stages.
022. onMounted
onMounted is the most frequently used hook. It runs after the component has been inserted into the DOM. This is the perfect place to fetch data from an API, initialize a 3D canvas, or interact with native DOM elements.
033. onUnmounted
onUnmounted runs right before the component is destroyed. It is absolutely critical for performance: you must use it to remove manual window.addEventListener listeners or clear setInterval timers to prevent memory leaks.
?Frequently Asked Questions
Why did my API call in onMounted not update the UI?
Make sure you are assigning the API result to a reactive variable (like a `ref`). If you assign it to a normal variable, Vue won't know it needs to re-render the screen.
