Vue.js Lifecycle Hooks Explained

Understanding Vue lifecycle hooks is essential for managing side effects, fetching data, and cleaning up resources.

The Lifecycle

export default {
  beforeCreate() {
    // Data and events not ready
  },
  
  created() {
    // Data ready, no DOM yet
    // Good for: API calls, event bus setup
    this.fetchData();
  },
  
  beforeMount() {
    // Template compiled, DOM about to render
  },
  
  mounted() {
    // DOM ready
    // Good for: DOM manipulation, third-party libraries
    this.initChart();
  },
  
  beforeUpdate() {
    // About to re-render
  },
  
  updated() {
    // Re-render complete
  },
  
  beforeDestroy() {
    // Cleanup time
    // Good for: Remove listeners, cancel subscriptions
    this.unsubscribe();
  },
  
  destroyed() {
    // Component gone
  }
}

Common Patterns

• Fetch data: created() or mounted()
• DOM access: mounted()
• Cleanup: beforeDestroy()