Why the Composition API exists in Vue - See It in Action

Understanding Why the Composition API Exists in Vue

📖 Scenario: You are building a simple Vue app to manage a list of tasks. You want to organize your code clearly and reuse logic easily.

🎯 Goal: Learn why Vue introduced the Composition API by creating a small app that uses it to manage tasks and compare it with the Options API.

📋 What You'll Learn

Create a reactive list of tasks using the Composition API

Add a reactive variable to track new task input

Write a function to add new tasks to the list

Use the setup() function to organize logic clearly

💡 Why This Matters

🌍 Real World

Developers use the Composition API in Vue to write cleaner, more maintainable code especially in bigger projects with complex logic.

💼 Career

Understanding the Composition API is essential for modern Vue development roles and helps in building scalable, reusable components.

1

Set up the initial reactive data with Composition API

Create a Vue component with a setup() function. Inside it, create a reactive array called tasks with these exact strings: 'Buy groceries', 'Walk the dog', and 'Read a book'.

Vue

// Create a reactive array called tasks with 'Buy groceries', 'Walk the dog', and 'Read a book'

Hint

Use ref from Vue to create reactive data inside setup().

2

Add a reactive variable for new task input

Inside the same setup() function, create a reactive string variable called newTask and set it to an empty string ''.

Vue

import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
// Create a reactive string called newTask and set it to ''

Hint

Use ref again to create a reactive string for the new task input.

3

Write a function to add new tasks

Inside setup(), write a function called addTask that adds the current newTask.value to the tasks.value array, then clears newTask.value to an empty string.

Vue

import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
const newTask = ref('')
// Write addTask function to add newTask.value to tasks.value and clear newTask.value

Hint

Check if newTask.value is not empty before adding. Use push to add to the array.

4

Complete the component by returning variables and function

At the end of setup(), return an object with tasks, newTask, and addTask so they can be used in the template.

Vue

import { ref } from 'vue'

const tasks = ref(['Buy groceries', 'Walk the dog', 'Read a book'])
const newTask = ref('')

function addTask() {
  if (newTask.value.trim() !== '') {
    tasks.value.push(newTask.value.trim())
    newTask.value = ''
  }
}
// Return tasks, newTask, and addTask

Hint

Return the reactive variables and function as an object from setup().

Practice

1. Why was the Composition API introduced in Vue?

easy

A. To remove support for reactive data

B. To replace templates with plain JavaScript

C. To organize component logic by grouping related code

D. To make Vue incompatible with TypeScript

Solution

1. Step 1: Understand Vue component logic challenges

   Before Composition API, logic was scattered in options like data, methods, computed, making reuse and reading harder.

2. Step 2: Identify Composition API purpose

   The Composition API groups related logic together, improving readability and reuse.

3. Final Answer:

   To organize component logic by grouping related code -> Option C

4. Quick Check:

   Composition API = Organize logic [OK]

Hint: Composition API groups related code for clarity [OK]

Common Mistakes:

• Thinking it removes templates
• Believing it disables reactivity
• Assuming it breaks TypeScript support

2. Which of the following is the correct way to import the ref function from Vue's Composition API?

easy

A. import ref from 'vue';

B. import { ref } from 'vue';

C. const ref = require('vue');

D. import { Ref } from 'vue';

Solution

1. Step 1: Recall ES module import syntax in Vue 3+

   Vue exports Composition API functions as named exports, so use curly braces for import.

2. Step 2: Check each option

   import { ref } from 'vue'; uses named import correctly. import ref from 'vue'; tries default import which is wrong. const ref = require('vue'); uses CommonJS require which is outdated. import { Ref } from 'vue'; imports 'Ref' (capitalized) which is a type, not a function.

3. Final Answer:

   import { ref } from 'vue'; -> Option B

4. Quick Check:

   Named import with curly braces = import { ref } from 'vue'; [OK]

Hint: Use curly braces for named imports from Vue [OK]

Common Mistakes:

• Using default import instead of named import
• Using require() instead of import
• Confusing types with functions

3. What will be the output of this Vue Composition API code snippet inside a component's setup()?

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    count.value++;
    return { count };
  }
}

What is the value of count when rendered?

medium

A. 0

B. An error occurs

C. undefined

D. 1

Solution

1. Step 1: Understand ref and its value property

   The ref(0) creates a reactive object with initial value 0 accessible via count.value.

2. Step 2: Analyze the increment operation

   count.value++ increases the value from 0 to 1 before returning it.

3. Final Answer:

   1 -> Option D

4. Quick Check:

   ref value incremented once = 1 [OK]

Hint: Remember to access .value with ref to get or set data [OK]

Common Mistakes:

• Expecting count to be 0 without increment
• Trying to use count directly without .value
• Thinking ref returns a primitive, not an object

4. Identify the error in this Composition API code snippet:

import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({ count: 0 });
    function increment() {
      state.count += 1
    }
    return { state, increment };
  }
}

medium

A. No error; code works correctly

B. Reactive object properties should not be mutated directly

C. Reactive must be imported as ref

D. Missing semicolon after increment function

Solution

1. Step 1: Review reactive usage

   The reactive function creates a reactive object whose properties can be mutated directly.

2. Step 2: Check the increment function

   The function increments state.count correctly without syntax errors.

3. Final Answer:

   No error; code works correctly -> Option A

4. Quick Check:

   Reactive objects allow direct property mutation [OK]

Hint: Reactive objects allow direct property changes [OK]

Common Mistakes:

• Thinking reactive properties are immutable
• Confusing reactive with ref usage
• Assuming missing semicolon causes error

5. You want to reuse a piece of logic that tracks a user's online status across multiple components. How does the Composition API help achieve this compared to the Options API?

hard

A. By allowing you to write a reusable function that returns reactive state and methods

B. By forcing you to duplicate the same data and methods in each component

C. By requiring you to use global variables for shared state

D. By removing support for reactive data in reusable code

Solution

1. Step 1: Understand logic reuse challenges in Options API

   Options API scatters logic in component options, making reuse hard without mixins or plugins.

2. Step 2: Recognize Composition API's reusable functions

   Composition API lets you write functions (composables) that return reactive state and methods to share logic easily.

3. Final Answer:

   By allowing you to write a reusable function that returns reactive state and methods -> Option A

4. Quick Check:

   Composition API enables reusable logic functions [OK]

Hint: Use composable functions to share reactive logic [OK]

Common Mistakes:

• Thinking duplication is necessary
• Believing global variables are required
• Assuming reactive data can't be reused