Vue Lifecycle Hooks: Options API vs Composition API Comparison

In Vue, lifecycle hooks in the Options API are defined as named methods inside the component object, while in the Composition API they are used as imported functions inside the setup() function. The Composition API offers more flexible and reusable lifecycle management compared to the more declarative but less flexible Options API.

Quick Comparison

This table summarizes key differences between lifecycle hooks in Vue's Options API and Composition API.

Aspect	Options API	Composition API
Definition Location	Inside component object as methods	Inside setup() using imported functions
Syntax Style	Declarative with named hooks like mounted()	Functional with hooks like onMounted()
Reusability	Limited to component scope	High, can extract hooks into reusable functions
Flexibility	Less flexible, tied to component options	More flexible, supports conditional and dynamic usage
Code Organization	Scattered by option type	Grouped by logical concern inside setup()
Learning Curve	Easier for beginners	Requires understanding of Composition API concepts

Key Differences

The Options API uses lifecycle hooks as named methods inside the component's options object, such as created(), mounted(), and beforeUnmount(). These hooks are automatically called by Vue at specific points in the component's life. This approach is straightforward and easy to understand for beginners because the hooks are clearly labeled and separated.

In contrast, the Composition API uses lifecycle hooks as functions imported from Vue, like onMounted() and onBeforeUnmount(), which are called inside the setup() function. This allows developers to group related logic together, making code more modular and reusable. For example, you can create custom composable functions that include lifecycle hooks and share them across components.

Overall, the Composition API provides more flexibility and better code organization, especially for complex components, while the Options API offers simplicity and clarity for smaller or simpler components.

Code Comparison

Here is how you use the mounted lifecycle hook to run code when a component is added to the page using the Options API.

vue

export default {
  data() {
    return { message: 'Hello from Options API' };
  },
  mounted() {
    console.log('Component mounted:', this.message);
  },
  template: `<div>{{ message }}</div>`
};

Output

Component mounted: Hello from Options API

Composition API Equivalent

The same mounted hook in the Composition API is used inside the setup() function with onMounted().

vue

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello from Composition API');
    onMounted(() => {
      console.log('Component mounted:', message.value);
    });
    return { message };
  },
  template: `<div>{{ message }}</div>`
};

Output

Component mounted: Hello from Composition API

When to Use Which

Choose Options API when building simple components or when you want a gentle learning curve with clear, declarative lifecycle hooks. It is great for beginners or small projects.

Choose Composition API when you need better code organization, want to reuse logic across components, or work on complex applications. It offers more flexibility and scalability for advanced Vue development.

Key Takeaways

Options API lifecycle hooks are defined as named methods inside the component object.

Composition API lifecycle hooks are functions used inside the setup() function for more flexible logic.

Composition API enables better code reuse and organization through composable functions.

Use Options API for simplicity and Composition API for complex or reusable logic.

Both APIs produce the same lifecycle behavior but differ in syntax and flexibility.