Composable accepting parameters in Vue - Step-by-Step Execution

Concept Flow - Composable accepting parameters

Call composable with params

↓

Inside composable: receive params

↓

Use params to create reactive state

↓

Return reactive state and functions

↓

Component uses returned state

↓

Component renders with param-based data

The component calls the composable with parameters, which creates reactive state based on those parameters and returns it for the component to use.

Execution Sample

Vue

import { ref } from 'vue'

function useCounter(start) {
  const count = ref(start)
  function increment() { count.value++ }
  return { count, increment }
}

This composable accepts a starting number and returns a reactive count and an increment function.

Execution Table

Step	Action	Parameter 'start'	count.value	increment() call	Output
1	Composable called with start=5	5	undefined	No	Composable initializes count with 5
2	count initialized as ref(start)	5	5	No	count.value is 5
3	increment() called	5	6	Yes	count.value increments to 6
4	increment() called again	5	7	Yes	count.value increments to 7
5	Component reads count.value	5	7	No	Rendered count is 7
6	No more actions	5	7	No	Execution ends

💡 No more increment calls; component uses final count value 7

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
start	undefined	5	5	5	5
count.value	undefined	5	6	7	7

Key Moments - 2 Insights

Why does count.value start at the parameter 'start' value?

Because the composable uses ref(start) to create reactive state initialized with the passed parameter, as shown in execution_table step 2.

What happens when increment() is called multiple times?

Each call increases count.value by 1, updating the reactive state, as seen in steps 3 and 4 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution table, what is count.value after the first increment() call?

A 6

B 5

C 7

D Undefined

💡 Hint

Check execution_table row 3 under count.value

At which step does the composable initialize count with the parameter value?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look at execution_table where count.value first gets the start value

If the composable was called with start=10 instead of 5, what would count.value be after two increments?

A 10

B 7

C 12

D 11

💡 Hint

Refer to variable_tracker and execution_table logic for increments

Concept Snapshot

Composable accepting parameters:
- Define composable as a function with parameters
- Use parameters to initialize reactive state (e.g., ref(start))
- Return reactive state and functions
- Component calls composable with arguments
- State updates reflect parameter-based initialization

Full Transcript

A composable in Vue is a function that can accept parameters. When you call it, you pass in values that it uses to create reactive state. For example, a composable called useCounter can take a starting number. Inside, it creates a reactive count initialized to that number. It also provides a function to increment the count. When the component uses this composable, it gets the reactive count and the increment function. Calling increment updates the count, and the component re-renders with the new value. This flow shows how parameters customize composables and how state changes over time.