Composable with lifecycle hooks in Vue - Step-by-Step Execution

Concept Flow - Composable with lifecycle hooks

Start Component Setup

↓

Call Composable Function

↓

Inside Composable: Setup Reactive State

↓

Register Lifecycle Hook (e.g., onMounted)

↓

Return State and Methods

↓

Component Uses Returned State

↓

Component Mounts

↓

Lifecycle Hook Runs

↓

Effect Happens (e.g., console log, data fetch)

↓

Component Renders with Updated State

The component calls a composable that sets up reactive state and registers lifecycle hooks. When the component mounts, the lifecycle hook inside the composable runs, triggering side effects.

Execution Sample

Vue

import { ref, onMounted } from 'vue'

function useCounter() {
  const count = ref(0)
  onMounted(() => {
    console.log('Mounted!')
  })
  return { count }
}

This composable creates a reactive count and logs 'Mounted!' when the component using it mounts.

Execution Table

Step	Action	State Before	State After	Effect
1	Component setup starts	No state	No state	No effect
2	Call useCounter composable	No state	count = 0	No effect
3	Register onMounted hook	count = 0	count = 0	Hook registered
4	Composable returns { count }	count = 0	count = 0	No effect
5	Component mounts	count = 0	count = 0	Trigger onMounted hook
6	onMounted hook runs	count = 0	count = 0	Console logs 'Mounted!'
7	Component renders with count=0	count = 0	count = 0	UI shows count 0

💡 Lifecycle hook runs once on component mount, then normal rendering continues.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 6	Final
count	undefined	0	0	0	0

Key Moments - 2 Insights

Why does the console.log inside onMounted run only after the component mounts?

Because onMounted registers a hook that runs only when the component finishes mounting, as shown in step 5 and 6 of the execution_table.

Is the reactive state 'count' available before the component mounts?

Yes, 'count' is created during composable call in setup (step 2), but lifecycle hooks run later (step 6).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 3?

A 1

B undefined

C 0

D null

💡 Hint

Check the 'State After' column for step 3 in execution_table.

At which step does the onMounted hook actually run?

A Step 2

B Step 6

C Step 4

D Step 7

💡 Hint

Look for the step where the effect 'Console logs "Mounted!"' happens in execution_table.

If we add a reactive variable inside onMounted instead of setup, when will it be available?

A Only after component mounts

B Immediately during setup

C Before component setup

D Never

💡 Hint

Recall that onMounted runs after mounting, so variables created there appear later.

Concept Snapshot

Composable with lifecycle hooks in Vue:
- Define reactive state inside composable using ref/reactive.
- Register lifecycle hooks like onMounted inside composable.
- Return state and methods from composable.
- Hooks run when component lifecycle reaches that phase.
- Enables reusable logic with side effects tied to component lifecycle.

Full Transcript

In Vue, a composable is a function that sets up reactive state and can register lifecycle hooks like onMounted. When a component calls this composable during its setup phase, the reactive state is created immediately. However, lifecycle hooks registered inside the composable only run when the component reaches that lifecycle phase, for example, when it mounts. This allows the composable to perform side effects such as logging or fetching data exactly when the component is ready. The execution table shows the step-by-step process: the component starts setup, calls the composable which creates state and registers hooks, then when the component mounts, the onMounted hook runs and triggers effects. This pattern helps organize reusable logic with lifecycle awareness.