What are the Vue component lifecycle hooks?
Quick Answer
The main hooks are beforeCreate/created (state ready, no DOM), beforeMount/mounted (DOM available), beforeUpdate/updated (reactive change re-rendered), and beforeUnmount/unmounted (teardown). In the Composition API they're onMounted, onUnmounted, etc. Fetch data in created/setup; touch the DOM or start timers in mounted; clean up in unmounted.
The lifecycle runs create, mount, update, unmount, each with a “before” and “after” hook. In created — or setup in the Composition API — my reactive state and props are ready, so that's where I trigger data fetching. mounted is when the component is actually in the DOM, so that's where I initialise a chart library, focus an input or add a window listener. And unmounted is where I clean up — remove listeners, clear intervals, cancel requests. Skipping that cleanup is a classic memory leak.
created/setup()— reactive data and props are available; good place to kick off an API call.mounted/onMounted— the component is in the DOM; use for chart libraries, focus, measuring elements, adding global listeners.updated— after a re-render; rarely needed, easy to cause loops.beforeUnmount/onUnmounted— remove event listeners, clear intervals, cancel in-flight requests. Forgetting this is a common memory leak.- Vue 3 adds
onErrorCaptured, and<KeepAlive>addsactivated/deactivated.