Why the Composition API exists in Vue - Visual Breakdown

Concept Flow - Why the Composition API exists

Start with Options API

↓

Face code organization issues

↓

Need better logic reuse

↓

Create Composition API

↓

Use setup() function to group logic

↓

Easier to share and maintain code

↓

Improved readability and flexibility

Shows the flow from using the Options API to the need for better code organization and logic reuse, leading to the creation of the Composition API.

Execution Sample

Vue

import { ref } from 'vue';

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

A simple Vue component using the Composition API to manage a counter state and increment function.

Execution Table

Step	Action	State Before	State After	Output/Effect
1	Call setup()	No reactive state	count = 0 (reactive)	Reactive count created
2	Define increment()	count = 0	Function increment defined	Function ready to update count
3	Return count and increment	count = 0	count and increment exposed	Component can use count and increment
4	User clicks button	count = 0	count = 1	UI updates to show count = 1
5	User clicks button again	count = 1	count = 2	UI updates to show count = 2

💡 User stops clicking; reactive state remains updated and UI reflects latest count

Variable Tracker

Variable	Start	After 1	After 2	Final
count.value	0	1	2	2

Key Moments - 2 Insights

Why do we use setup() instead of data() and methods()?

setup() groups related logic together, making code easier to read and reuse, unlike data() and methods() which separate state and functions. See execution_table steps 1-3.

How does the Composition API help with code reuse?

By putting logic inside setup() and returning it, we can extract and share functions easily across components, unlike the Options API. This is shown in the way increment() is defined and returned in steps 2-3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 4?

A 1

B 0

C 2

D Undefined

💡 Hint

Check the 'State After' column for step 4 in the execution_table.

At which step is the increment function created?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column describing function definition in execution_table.

If we did not return count and increment from setup(), what would happen?

A They would still be usable in the template

B The component would crash

C They would not be accessible in the template

D The count would reset automatically

💡 Hint

Returning variables from setup() exposes them to the template, see step 3 in execution_table.

Concept Snapshot

Composition API groups related logic inside setup() function.
Use reactive refs like count = ref(0) to track state.
Return state and functions to expose them to the template.
Improves code reuse and readability over Options API.
Enables easier sharing of logic across components.

Full Transcript

The Composition API was created to solve problems with code organization and reuse in Vue's Options API. Instead of separating data and methods, the Composition API uses a setup() function to group related logic together. This makes code easier to read, maintain, and share. In the example, a reactive count variable is created with ref(0), and an increment function updates it. Both are returned from setup() so the template can use them. When the user clicks a button, increment updates count, and the UI reflects the new value. This flow shows how the Composition API improves flexibility and clarity in Vue components.