Composable accepting parameters in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a composable that accepts a parameter.

Vue

import { ref } from 'vue'

export function useCounter(initialValue) {
  const count = ref([1])
  function increment() {
    count.value++
  }
  return { count, increment }
}

Drag options to blanks, or click blank then click option'

A0

BinitialValue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed number like 0 instead of the parameter

Using undefined or null which does not use the parameter

The composable uses the passed initialValue parameter to set the initial count.

2fill in blank

medium

Complete the code to accept a parameter and return a computed value based on it.

Vue

import { computed } from 'vue'

export function useGreeting(name) {
  const greeting = computed(() => `Hello, [1]!`)
  return { greeting }
}

Drag options to blanks, or click blank then click option'

Aname

Bname.value

Cthis.name

Dgreeting

Attempts:

3 left

💡 Hint

Common Mistakes

Using name.value which is for refs

Using this.name which is not valid here

The parameter name is a plain string, so use it directly inside the template literal.

3fill in blank

hard

Fix the error in the composable that accepts a ref parameter and returns a reactive doubled value.

Vue

import { computed } from 'vue'

export function useDouble(count) {
  const double = computed(() => count[1] * 2)
  return { double }
}

Drag options to blanks, or click blank then click option'

A->value

Bvalue

C.value

D=>value

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting .value causing runtime errors

Using arrow or other invalid syntax

When using a ref parameter, access its value with .value inside computed.

4fill in blank

hard

Fill both blanks to create a composable that accepts a ref and returns a computed greeting with reactive name.

Vue

import { computed } from 'vue'

export function useReactiveGreeting(nameRef) {
  const greeting = computed(() => `Hi, [1]!`)
  return { greeting }
}

Drag options to blanks, or click blank then click option'

AnameRef.value

BnameRef()

CnameRef.val

DnameRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using nameRef directly which returns the ref object

Using nameRef() which is invalid for refs

To get the current value of a ref, use .value.

5fill in blank

hard

Fill all three blanks to create a composable that accepts a parameter, uses a ref, and returns a function to update it.

Vue

import { ref } from 'vue'

export function useName(initialName) {
  const name = ref([1])
  function setName(newName) {
    name[2] = [3]
  }
  return { name, setName }
}

Drag options to blanks, or click blank then click option'

AinitialName

B.value

CnewName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning directly to name instead of name.value

Using wrong variable names in assignment

The ref name is initialized with initialName. To update it, assign newName to name.value.

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