Composable with reactive state 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 reactive APIs to share state and logic across components.

beginner

Which Vue 3 API is commonly used inside composables to create reactive state?

The ref() and reactive() APIs are used to create reactive state inside composables.

intermediate

Why use composables instead of putting all logic inside components?

Composables help keep code clean and reusable by separating logic from component templates, making it easier to share and test.

intermediate

How do you return reactive state from a composable?

Return the reactive variables (created with ref() or reactive()) from the composable function so components can use them.

advanced

What happens if you call a composable multiple times in different components?

Each call creates a new independent reactive state, so components do not share state unless explicitly designed to do so.

Which Vue API creates a single reactive value inside a composable?

A watch()

B reactive()

C computed()

D ref()

ref() creates a reactive single value, while reactive() creates a reactive object.

What is the main benefit of using composables in Vue 3?

A Reuse logic and state across components

B Replace templates with JavaScript

C Make components class-based

D Disable reactivity

Composables let you reuse logic and reactive state easily across multiple components.

If you want to share reactive state between components, what should you do?

A Use <code>watch()</code> inside each component

B Call the composable separately in each component

C Use a composable that returns the same reactive object instance

D Use <code>computed()</code> without reactive state

Sharing the same reactive object instance from a composable allows components to share state.

Which Vue 3 feature is NOT typically part of a composable?

A Template HTML

B Lifecycle hooks

C Reusable functions

D Reactive state

Composables contain logic and reactive state but do not include template HTML.

What does reactive() do in a composable?

A Creates a reactive single value

B Creates a reactive object with multiple properties

C Runs a side effect when data changes

D Defines a computed property

reactive() wraps an object to make all its properties reactive.

Explain what a composable with reactive state is in Vue 3 and why it is useful.

Think about how you can reuse code and state in multiple places.

Describe how you would create and use a simple composable that holds a counter state.

Imagine making a small reusable counter logic.