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.

Practice

1.

What is the main purpose of passing parameters to a Vue composable function?

easy

A. To customize the composable's behavior for different uses

B. To make the composable function run only once

C. To prevent the composable from using Vue's reactivity

D. To automatically render a template inside the composable

Solution

1. Step 1: Understand composable functions

   Composable functions are reusable pieces of logic in Vue that can be shared across components.

2. Step 2: Role of parameters in composables

   Parameters allow passing different inputs to the composable so it can behave differently depending on the need.

3. Final Answer:

   To customize the composable's behavior for different uses -> Option A

4. Quick Check:

   Parameters customize composables = A [OK]

Hint: Parameters let composables adapt to different inputs [OK]

Common Mistakes:

• Thinking composables run only once
• Believing parameters disable reactivity
• Confusing composables with templates

2.

Which of the following is the correct way to define a composable that accepts a parameter initialCount?

function useCounter(???) {
  const count = ref(initialCount)
  return { count }
}

easy

A. useCounter((initialCount))

B. useCounter()

C. useCounter(initialCount)

D. useCounter(initialCount: number)

Solution

1. Step 1: Check JavaScript function parameter syntax

   In JavaScript, function parameters are named without types or parentheses inside the parentheses.

2. Step 2: Match parameter name with usage

   The parameter initialCount must be declared inside the parentheses as initialCount.

3. Final Answer:

   useCounter(initialCount) -> Option C

4. Quick Check:

   Function parameter syntax = D [OK]

Hint: Function parameters go inside parentheses without types [OK]

Common Mistakes:

• Adding types like in TypeScript without syntax
• Using parentheses inside parameter list
• Leaving parameters empty when needed

3.

Given this composable and usage, what will be logged?

import { ref } from 'vue'
function useGreeting(name) {
  const greeting = ref(`Hello, ${name}!`)
  return { greeting }
}

const { greeting } = useGreeting('Alice')
console.log(greeting.value)

medium

A. undefined

B. "Hello, Alice!"

C. "Hello, name!"

D. Error: greeting is not defined

Solution

1. Step 1: Understand parameter passing

   The composable receives 'Alice' as the name parameter, so the greeting string becomes "Hello, Alice!".

2. Step 2: Accessing the ref value

   The greeting is a ref, so to get the string, we use greeting.value, which logs "Hello, Alice!".

3. Final Answer:

   "Hello, Alice!" -> Option B

4. Quick Check:

   Ref .value logs "Hello, Alice!" = C [OK]

Hint: Use .value to get ref content in Vue composables [OK]

Common Mistakes:

• Logging the ref object instead of its value
• Confusing parameter name with string literal
• Forgetting to import ref from 'vue'

4.

Identify the error in this composable that accepts a parameter start:

import { ref } from 'vue'
function useTimer(start) {
  const time = ref(start)
  function increment() {
    time++
  }
  return { time, increment }
}

medium

A. Cannot increment a ref directly with ++ operator

B. Missing return statement for increment function

C. Parameter start is not reactive

D. Ref should be initialized with 0, not start

Solution

1. Step 1: Check how ref values are updated

   Refs hold their value inside the .value property, so you cannot increment the ref itself.

2. Step 2: Identify correct increment syntax

   The increment function should update time.value++ instead of time++.

3. Final Answer:

   Cannot increment a ref directly with ++ operator -> Option A

4. Quick Check:

   Update ref via .value, not ref itself = B [OK]

Hint: Use .value to update ref, not the ref variable itself [OK]

Common Mistakes:

• Trying to increment ref without .value
• Thinking parameters must be reactive
• Forgetting to return functions from composable

5.

You want a composable useFilteredList that accepts an array and a filter function as parameters. Which implementation correctly applies the filter reactively?

import { computed } from 'vue'

function useFilteredList(list, filterFn) {
  const filtered = computed(() => ??? )
  return { filtered }
}

What should replace ????

hard

A. list.filter(filterFn)

B. filterFn(list)

C. computed(() => list.filter(filterFn))

D. list.value.filter(filterFn)

Solution

1. Step 1: Understand composable parameters

   The list parameter is expected to be a ref(array) for proper reactivity in Vue composables.

2. Step 2: Reactive filtering with computed

   Inside the computed, access the array value with list.value.filter(filterFn) to apply the filter reactively whenever the list changes.

3. Final Answer:

   list.value.filter(filterFn) -> Option D

4. Quick Check:

   computed(() => list.value.filter(filterFn)) = C [OK]

Hint: Use computed(() => list.value.filter(fn)) for reactive filtering [OK]

Common Mistakes:

• Using list.filter(filterFn) without .value when list is ref
• Calling filterFn(list) instead of list.filter(filterFn)
• Unnecessarily nesting computed inside computed