Options API vs Composition API decision in Vue - Visual Side-by-Side Comparison

Concept Flow - Options API vs Composition API decision

Start: Choose API style

↓

Options API

↓

Define data, methods, computed

↓

Component created

↓

Use template with this

↓

Render component

↓

End

↓

Start: Choose API style

↓

Composition API

↓

Import reactive, ref, functions

↓

Setup function: define state and logic

↓

Return reactive state

↓

Use template with direct refs

↓

Render component

↓

End

This flow shows the two main ways to build Vue components: Options API organizes code by options like data and methods, while Composition API organizes by logical features inside a setup function.

Execution Sample

Vue

export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

This Options API example defines a count state and an increment method inside a Vue component.

Execution Table

Step	Action	State Before	State After	Output/Effect
1	Component created	count: undefined	count: 0	Initial state set
2	Call increment method	count: 0	count: 1	count increased by 1
3	Render template	count: 1	count: 1	Display count = 1
4	Call increment method again	count: 1	count: 2	count increased by 1
5	Render template	count: 2	count: 2	Display count = 2
6	End	count: 2	count: 2	Component stable

💡 Component lifecycle ends or user stops interaction

Variable Tracker

Variable	Start	After 1	After 2	Final
count	undefined	0	1	2

Key Moments - 2 Insights

Why do we use 'this.count' in Options API but just 'count' in Composition API?

In Options API, 'this' refers to the component instance, so data and methods are accessed via 'this'. In Composition API, variables are defined inside setup and returned, so you use them directly without 'this'. See execution_table steps 2 and 3.

How does Composition API help with organizing complex logic better than Options API?

Composition API groups related code (state, functions) together inside setup, making it easier to manage and reuse. Options API splits code by type (data, methods), which can scatter related logic. This is why many prefer Composition API for bigger components.

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 does the component first render the count value?

A Step 1

B Step 3

C Step 2

D Step 5

💡 Hint

Look for 'Render template' action in the execution_table.

If we switch to Composition API, how would accessing 'count' in the template change?

A Use 'count' directly without 'this'

B Use 'count.value' inside template

C Use 'this.count' as before

D Cannot access 'count' in template

💡 Hint

Recall key_moments explanation about 'this' usage difference between APIs.

Concept Snapshot

Options API:
- Organizes code by options: data, methods, computed
- Uses 'this' to access state and methods
- Simple for small components

Composition API:
- Organizes code by logical features inside setup()
- Uses refs/reactive for state
- Access state directly without 'this'
- Better for complex, reusable logic

Full Transcript

This visual guide compares Vue's Options API and Composition API. Options API organizes component code by options like data and methods, accessed via 'this'. Composition API uses a setup function to group related state and logic, accessed directly without 'this'. The execution table traces a simple count increment example showing state changes and rendering steps. Key moments clarify why 'this' is used in Options API but not in Composition API, and how Composition API improves code organization. The quiz tests understanding of state changes and API differences. The snapshot summarizes key syntax and usage differences for quick reference.