Composable accepting parameters in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a composable in Vue 3?

A composable is a reusable function that uses Vue's Composition API features like ref and reactive to share logic between components.

beginner

How do you pass parameters to a composable in Vue?

You pass parameters by defining them as function arguments when creating the composable. This allows the composable to use dynamic values.

intermediate

Why use parameters in composables?

Parameters make composables flexible and reusable by allowing different inputs to customize their behavior for each use case.

beginner

Example: What does this composable do?
<pre>import { ref } from 'vue';
function useCounter(start = 0) {
  const count = ref(start);
  const increment = () => count.value++;
  return { count, increment };
}</pre>

This composable creates a counter starting at the given start value (default 0). It returns a reactive count and an increment function to increase it.

beginner

How does Vue's ref help in composables?

ref creates a reactive value that Vue tracks for changes. When used in composables, it allows components to reactively update when the composable's state changes.

How do you make a composable accept a starting value in Vue?

A By hardcoding the value inside the composable

B By using a global variable

C By adding a parameter to the composable function

D By passing props to the composable

Composable functions accept parameters like any normal function, allowing dynamic input.

What Vue feature makes the composable's state reactive?

A ref

B props

C emit

D watch

ref creates reactive data that Vue tracks for changes.

Which of these is a benefit of passing parameters to composables?

A Prevents composables from being reactive

B Makes composables reusable with different data

C Forces composables to be global

D Disables component updates

Parameters allow composables to work with different inputs, increasing reuse.

What is the default value of the parameter in this composable?

function useCounter(start = 0) { ... }

A 1

B undefined

C null

D 0

The parameter start has a default value of 0.

How do you access the reactive value inside a ref in Vue?

A Using the <code>.value</code> property

B Directly like a normal variable

C Using <code>.reactive</code>

D Using <code>.data</code>

Reactive values inside ref are accessed with .value.

Explain how to create a composable in Vue that accepts parameters and why this is useful.

Think about how functions normally take inputs and how that applies to composables.

Describe how Vue's ref works inside a composable and how you use it with parameters.

Consider how reactive state and parameters combine to make composables powerful.