Why the Composition API exists in Vue - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why was the Composition API introduced in Vue 3?

Which of the following best explains the main reason Vue introduced the Composition API?

A To force developers to write class-based components instead of functions.

B To make Vue components run faster by removing reactivity.

C To allow better code organization and reuse by grouping related logic together.

D To replace the Options API because it was deprecated and no longer supported.

💡 Hint

Think about how developers manage complex logic in components.

The Composition API was introduced to help developers organize and reuse code better by grouping related logic together, especially in complex components.

❓ component_behavior

intermediate

How does the Composition API improve code reuse?

Given two Vue components using the Composition API, what is the main way they share logic?

A By copying and pasting the entire setup function code between components.

B By extracting reusable functions called composables that return reactive state and methods.

C By using global variables to share data across components.

D By defining all logic inside the template section.

💡 Hint

Think about how functions can return reactive data to be reused.

Composables are functions that encapsulate reactive state and logic, allowing multiple components to reuse the same code easily.

📝 Syntax

advanced

Identify the correct Composition API setup syntax

Which option shows the correct way to define reactive state and a method inside the setup function using the Composition API?

Vue

import { ref } from 'vue';

export default {
  setup() {
    // define count and increment
  }
}

A

const count = ref(0);
function increment() { count.value++; }
return { count, increment };

B

const count = ref(0);
function increment() { count++; }
return { count, increment };

C

const count = reactive(0);
function increment() { count++; }
return { count, increment };

D

const count = 0;
function increment() { count++; }
return { count, increment };

💡 Hint

Remember how to create reactive variables and update their values.

Using ref creates a reactive variable. You must update its value with count.value++. Returning these allows template access.

🔧 Debug

advanced

Why does this Composition API code cause an error?

What error will this Vue 3 Composition API code cause and why? import { ref } from 'vue'; export default { setup() { const count = ref(0); function increment() { count++; } return { count, increment }; } }

A No error; the code runs correctly and increments count.

B SyntaxError because the function increment is missing parentheses.

C ReferenceError because count is not defined inside increment.

D TypeError because count is a ref object and cannot be incremented directly.

💡 Hint

Think about how to update a ref's value properly.

count is a ref object. You must update count.value, not count directly. Using count++ causes a TypeError.

❓ lifecycle

expert

How does the Composition API handle lifecycle hooks differently?

In Vue 3 Composition API, how do you register a lifecycle hook like mounted inside the setup function?

A By importing the hook function (e.g., onMounted) and calling it inside setup with a callback.

B By defining a mounted() method inside the component options object.

C By adding a mounted property to the reactive state object.

D By calling the lifecycle hook outside the setup function.

💡 Hint

Think about how Composition API uses functions to register hooks.

Composition API uses functions like onMounted imported from Vue. You call them inside setup with a callback to run code on mount.