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.

Practice

1. What is the main purpose of using lifecycle hooks inside a Vue composable?

easy

A. To run code automatically when a component starts or stops

B. To define the component's template structure

C. To style the component with CSS

D. To create new Vue components

Solution

1. Step 1: Understand lifecycle hooks role

   Lifecycle hooks let you run code at specific times in a component's life, like when it starts or stops.

2. Step 2: Connect lifecycle hooks with composables

   Using lifecycle hooks inside composables allows shared logic to run automatically when components use the composable.

3. Final Answer:

   To run code automatically when a component starts or stops -> Option A

4. Quick Check:

   Lifecycle hooks run code at component start/stop = A [OK]

Hint: Lifecycle hooks run code on component start or cleanup [OK]

Common Mistakes:

• Thinking lifecycle hooks define templates
• Confusing styling with lifecycle hooks
• Believing composables create components

2. Which of the following is the correct way to import and use the onMounted lifecycle hook inside a Vue 3 composable?

easy

A. import { onMounted } from 'vue'; onMounted = () => { /* code */ };

B. import onMounted from 'vue'; onMounted(() => { /* code */ });

C. import { onMounted } from 'vue'; onMounted(() => { /* code */ });

D. import { onMounted } from 'vue'; onMounted.function(() => { /* code */ });

Solution

1. Step 1: Check import syntax

   Vue lifecycle hooks like onMounted are named exports, so use curly braces in import.

2. Step 2: Check usage syntax

   onMounted is a function that takes a callback, so call it with a function argument.

3. Final Answer:

   import { onMounted } from 'vue'; onMounted(() => { /* code */ }); -> Option C

4. Quick Check:

   Correct import and call syntax = A [OK]

Hint: Use curly braces to import lifecycle hooks from 'vue' [OK]

Common Mistakes:

• Importing without curly braces
• Assigning onMounted to a function instead of calling it
• Using incorrect method like onMounted.function

3. Given this composable code, what will be logged when a component using it is mounted?

import { ref, onMounted } from 'vue';
export function useLogger() {
  const message = ref('Hello');
  onMounted(() => {
    console.log(message.value);
  });
  return { message };
}

medium

A. Hello

B. undefined

C. null

D. An error is thrown

Solution

1. Step 1: Understand ref initialization

   The message ref is initialized with the string 'Hello'.

2. Step 2: Check onMounted callback

   When the component mounts, the callback logs message.value, which is 'Hello'.

3. Final Answer:

   Hello -> Option A

4. Quick Check:

   Ref value logged on mount = B [OK]

Hint: Ref values accessed with .value inside lifecycle hooks [OK]

Common Mistakes:

• Logging ref without .value
• Expecting undefined before mount
• Thinking onMounted runs before ref initialization

4. Identify the error in this composable using lifecycle hooks:

import { onMounted, onUnmounted } from 'vue';
export function useTimer() {
  let timer = null;
  onMounted(() => {
    timer = setInterval(() => console.log('tick'), 1000);
  });
  onUnmounted(() => {
    clearInterval(timer);
  });
  return {};
}

medium

A. timer should be a ref to persist between hooks

B. onUnmounted should be onBeforeUnmount

C. setInterval callback syntax is wrong

D. No error, code works correctly

Solution

1. Step 1: Check variable scope and usage

   Variable timer is declared in composable scope and updated in onMounted, accessible in onUnmounted.

2. Step 2: Verify lifecycle hooks usage

   onMounted sets interval, onUnmounted clears it correctly to avoid memory leaks.

3. Final Answer:

   No error, code works correctly -> Option D

4. Quick Check:

   Proper timer setup and cleanup = D [OK]

Hint: Variables in composable scope persist across lifecycle hooks [OK]

Common Mistakes:

• Thinking timer must be a ref
• Confusing onUnmounted with onBeforeUnmount
• Misunderstanding setInterval callback syntax

5. You want to create a composable that fetches data when a component mounts and cancels the fetch if the component unmounts before completion. Which lifecycle hooks and pattern should you use inside the composable?

hard

A. Use onUnmounted to start fetch and onMounted to abort fetch

B. Use onMounted to start fetch and onUnmounted to abort fetch with an AbortController

C. Use onBeforeMount to start fetch and onMounted to abort fetch

D. Use onMounted to start fetch and no cleanup is needed

Solution

1. Step 1: Determine when to start fetch

   Fetching data should start when the component is fully mounted, so use onMounted.

2. Step 2: Handle cleanup on unmount

   To cancel fetch if component unmounts early, use onUnmounted to abort the fetch using an AbortController.

3. Final Answer:

   Use onMounted to start fetch and onUnmounted to abort fetch with an AbortController -> Option B

4. Quick Check:

   Fetch start on mount, abort on unmount = C [OK]

Hint: Start fetch on mount, abort on unmount with AbortController [OK]

Common Mistakes:

• Starting fetch too early or too late
• Not aborting fetch on unmount causing leaks
• Using wrong lifecycle hooks for cleanup