By Rahul — Google Frontend Engineer
The Lifecycle Phases
Every Vue component goes through a series of initialization steps — setting up data observation, compiling templates, mounting to the DOM, and updating when data changes. Vue gives you hooks to run code at each phase.
The Hooks in Order
Creation Phase
Mounting Phase
Update Phase
Destruction Phase
Vue 3 Composition API Equivalents
Production Issues
- Memory leak: Forgetting to clean up in beforeDestroy/beforeUnmount. Every addEventListener needs a removeEventListener
- API calls in mounted vs created: Use created for API calls — it runs earlier. Use mounted only when you need DOM access
- Infinite update loop: Modifying reactive data inside updated() triggers another update
- SSR gotcha: mounted() does NOT run on the server. Only beforeCreate and created run during SSR
Summary
Vue lifecycle goes: create → mount → update → destroy. Use created for data fetching, mounted for DOM access, and beforeDestroy for cleanup. In Vue 3, the Composition API provides the same hooks as functions.