Composable with lifecycle hooks in Vue - Deep Dive

Overview - Composable with lifecycle hooks

What is it?

A composable with lifecycle hooks in Vue is a reusable function that uses Vue's lifecycle events to run code at specific times during a component's life. It helps organize logic that needs to react when a component is created, updated, or destroyed. This makes your code cleaner and easier to maintain by separating concerns into small, focused pieces.

Why it matters

Without composables using lifecycle hooks, you would have to repeat lifecycle logic inside each component, making your code messy and hard to update. Composables let you share lifecycle-aware logic easily, saving time and reducing bugs. This improves app stability and developer productivity, especially in large projects.

Where it fits

Before learning composables with lifecycle hooks, you should understand Vue's basic reactivity system and component lifecycle. After this, you can explore advanced state management, custom directives, and Vue Router integration to build full-featured apps.

Mental Model

Core Idea

Composable functions with lifecycle hooks let you package reactive logic that automatically runs at key moments in a component's life.

Think of it like...

It's like setting reminders on your phone that trigger actions at certain times, so you don't have to remember to do them yourself.

┌─────────────────────────────┐
│ Vue Component Lifecycle     │
│                             │
│  ┌───────────────┐          │
│  │ Setup Phase   │◄─────────┤
│  └───────────────┘          │
│         │                   │
│         ▼                   │
│  ┌───────────────┐          │
│  │ Mounted Phase │          │
│  └───────────────┘          │
│         │                   │
│         ▼                   │
│  ┌───────────────┐          │
│  │ Unmounted     │          │
│  │ Phase         │          │
│  └───────────────┘          │
│                             │
│ Composable hooks attach     │
│ functions to these phases   │
└─────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding Vue Lifecycle Basics

Concept: Learn what lifecycle hooks are and when they run in a Vue component.

Vue components go through stages: creation, mounting to the page, updating, and unmounting. Lifecycle hooks are special functions you can run at these stages, like 'onMounted' when the component appears on screen, or 'onUnmounted' when it is removed.

Result

You know when and why lifecycle hooks run inside Vue components.

Understanding lifecycle hooks is key to knowing when to run code that depends on the component's presence or cleanup.

2

Foundation

What Are Composables in Vue?

Concept: Composables are reusable functions that use Vue's reactive features to share logic.

Instead of writing all logic inside components, you can create composable functions that return reactive data or methods. These composables can be used in many components to keep code DRY (Don't Repeat Yourself).

Result

You can create and use composables to organize reactive logic outside components.

Knowing composables lets you separate concerns and reuse code easily across your app.

3

Intermediate

Using Lifecycle Hooks Inside Composables

🤔Before reading on: do you think lifecycle hooks can only be used inside components or also inside composables? Commit to your answer.

Concept: Vue allows lifecycle hooks to be called inside composable functions to run code at component lifecycle events.

Inside a composable, you can import hooks like 'onMounted' or 'onUnmounted' from Vue and call them. The code inside these hooks will run when the component using the composable reaches that lifecycle stage.

Result

Your composable can react to lifecycle events of the component that uses it.

This unlocks powerful patterns where composables manage setup and cleanup automatically, improving code modularity.

4

Intermediate

Sharing Side Effects with Composables

🤔Before reading on: do you think composables with lifecycle hooks can manage side effects like timers or event listeners? Commit to your answer.

Concept: Composables can use lifecycle hooks to start and stop side effects safely within components.

For example, a composable can start a timer on 'onMounted' and clear it on 'onUnmounted'. This ensures side effects don't leak or cause bugs when components are removed.

Result

Side effects are managed cleanly and automatically by composables.

Knowing this prevents common bugs like memory leaks and stale data in Vue apps.

5

Advanced

Handling Multiple Lifecycle Hooks in One Composable

🤔Before reading on: can a single composable use multiple lifecycle hooks to handle complex logic? Commit to your answer.

Concept: A composable can register multiple lifecycle hooks to handle different phases of the component lifecycle.

You can call 'onBeforeMount', 'onMounted', 'onBeforeUnmount', and others inside one composable to run code at each phase. This lets you build rich reusable logic that reacts precisely to lifecycle changes.

Result

Your composable can fully control its behavior across the component lifecycle.

This shows how composables can encapsulate complex lifecycle-aware logic, making components simpler.

6

Expert

Lifecycle Hook Limitations and Reactivity Caveats

🤔Before reading on: do you think lifecycle hooks inside composables run even if the composable is called outside setup()? Commit to your answer.

Concept: Lifecycle hooks only work inside setup() or functions called during setup; calling composables outside setup breaks lifecycle behavior.

If you call a composable with lifecycle hooks outside the setup function, hooks won't register properly and won't run. Also, reactive data inside composables must be handled carefully to avoid stale closures or unexpected updates.

Result

You understand when lifecycle hooks inside composables run and common pitfalls.

Knowing these limits prevents subtle bugs and ensures your composables behave as expected in production.

Under the Hood

Vue tracks component lifecycles internally and provides hook functions that register callbacks to run at specific lifecycle phases. When a composable calls a lifecycle hook inside setup(), Vue adds the callback to the component's lifecycle event queue. When the component reaches that phase, Vue executes all registered callbacks in order. This mechanism allows composables to inject behavior into the component lifecycle seamlessly.

Why designed this way?

Vue's design separates component logic from lifecycle management to keep components declarative and composables reusable. By allowing lifecycle hooks inside composables, Vue enables modular code without forcing lifecycle code inside components. This design balances flexibility with simplicity, avoiding complex inheritance or mixin patterns.

┌───────────────────────────────┐
│ Vue Component Instance        │
│                               │
│  ┌───────────────┐            │
│  │ Setup()       │            │
│  │ ┌───────────┐ │            │
│  │ │ Composable│ │            │
│  │ │ calls     │ │            │
│  │ │ onMounted │ │            │
│  │ └───────────┘ │            │
│  └───────────────┘            │
│       │                       │
│       ▼                       │
│  Lifecycle Hook Registry      │
│  ┌─────────────────────────┐│
│  │ onMounted callbacks list ││
│  └─────────────────────────┘│
│       │                       │
│       ▼                       │
│  Component Mount Phase        │
│  ┌─────────────────────────┐│
│  │ Execute onMounted hooks  ││
│  └─────────────────────────┘│
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: do lifecycle hooks inside composables run if the composable is called outside setup()? Commit to yes or no.

Common Belief: Lifecycle hooks inside composables run no matter where the composable is called.

Reality: Lifecycle hooks only register and run if the composable is called during the component's setup() phase.

Why it matters: Calling composables with lifecycle hooks outside setup() means hooks won't run, causing missing behavior and hard-to-debug errors.

Quick: do you think composables with lifecycle hooks automatically share state between components? Commit to yes or no.

Common Belief: Composables with lifecycle hooks share reactive state across all components using them by default.

Reality: Each component gets its own instance of reactive state from a composable; state is not shared unless explicitly designed to be.

Why it matters: Assuming shared state can cause unexpected bugs where components don't isolate their data properly.

Quick: do you think lifecycle hooks inside composables can be used to run asynchronous code safely? Commit to yes or no.

Common Belief: You can run any asynchronous code inside lifecycle hooks in composables without issues.

Reality: Asynchronous code inside lifecycle hooks must be handled carefully to avoid race conditions or memory leaks, especially on unmount.

Why it matters: Ignoring async cleanup can cause bugs like updating unmounted components or leaking resources.

Quick: do you think lifecycle hooks inside composables replace the need for component-level lifecycle hooks? Commit to yes or no.

Common Belief: Using lifecycle hooks in composables means you never need lifecycle hooks directly in components.

Reality: Composables complement but do not replace component lifecycle hooks; sometimes component-specific logic belongs directly in the component.

Why it matters: Misusing composables for all lifecycle logic can lead to confusing code and harder debugging.

Expert Zone

1

Composables with lifecycle hooks must be called synchronously during setup to register hooks correctly; async setup or conditional calls can break hook registration.

2

Reactive references inside composables can cause stale closures if not carefully managed, especially when used inside lifecycle hooks that run later.

3

Combining multiple composables with overlapping lifecycle hooks requires understanding hook execution order to avoid side effect conflicts.

When NOT to use

Avoid using composables with lifecycle hooks for logic that is purely static or unrelated to component lifecycle, such as pure utility functions. For global state or cross-component communication, use Vuex or Pinia instead. Also, do not use lifecycle hooks in composables outside setup or in non-component contexts.

Production Patterns

In real apps, composables with lifecycle hooks are used to manage subscriptions, timers, event listeners, and cleanup logic. For example, a composable might handle WebSocket connections opening on mount and closing on unmount. Teams often create domain-specific composables like useAuth or useDataFetcher that encapsulate lifecycle-aware logic for reuse.

Connections

Reactive Programming

Composable lifecycle hooks build on reactive programming principles by reacting to lifecycle events as triggers.

Understanding reactive programming helps grasp how composables respond to lifecycle changes and update state automatically.

Observer Pattern

Lifecycle hooks act like observers watching component state changes and lifecycle events.

Knowing the observer pattern clarifies how Vue internally manages lifecycle callbacks and composable hooks.

Event-Driven Architecture

Lifecycle hooks are event listeners responding to lifecycle events, similar to event-driven systems in software design.

Recognizing lifecycle hooks as event handlers helps understand their role in modular, decoupled code.

Common Pitfalls

#1 Calling a composable with lifecycle hooks outside the setup function.

Wrong approach:

const data = useTimer(); // called outside setup()

Correct approach:

setup() {
const data = useTimer();
return { data };
}

Root cause:

Misunderstanding that lifecycle hooks only register during setup phase, so calling composables outside setup prevents hooks from running.

#2 Not cleaning up side effects started in lifecycle hooks.

Wrong approach:

onMounted(() => {
setInterval(() => console.log('tick'), 1000);
}); // no cleanup

Correct approach:

onMounted(() => {
const id = setInterval(() => console.log('tick'), 1000);
onUnmounted(() => clearInterval(id));
});

Root cause:

Forgetting to clear timers or listeners causes memory leaks and unexpected behavior after component unmount.

#3 Assuming reactive state in composables is shared across components.

Wrong approach:

const count = ref(0); // defined outside composable
function useCounter() {
return { count };
}

Correct approach:

function useCounter() {
const count = ref(0);
return { count };
}

Root cause:

Defining reactive state outside composables causes shared state, breaking component isolation.

Key Takeaways

Composable functions with lifecycle hooks let you write reusable, lifecycle-aware logic that runs automatically at key component phases.

Lifecycle hooks inside composables only work when called during the component's setup function, ensuring proper registration.

Using lifecycle hooks in composables helps manage side effects like timers and event listeners cleanly, preventing bugs and leaks.

Understanding the internal mechanism of lifecycle hook registration clarifies why composables must be used correctly within setup.

Expert use involves careful management of reactive state and hook order to build robust, maintainable Vue applications.