Script setup syntax in Vue - Step-by-Step Execution

Concept Flow - Script setup syntax

Start: <script setup> block

↓

Declare reactive refs and variables

↓

Define functions and imports

↓

Template uses declared refs and functions

↓

Vue compiles and binds reactive data

↓

Component renders with reactive updates

The <script setup> block declares reactive variables and functions directly, which Vue compiles and binds to the template for reactive rendering.

Execution Sample

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

This Vue component uses <script setup> to declare a reactive count and an increment function, updating the button label on click.

Execution Table

Step	Action	Variable State	Template Binding	Rendered Output
1	Import ref from Vue	No variables yet	No binding	N/A
2	Declare count = ref(0)	count = 0 (reactive)	count bound to template	Button shows 'Count: 0'
3	Define increment function	count unchanged	increment bound to click event	Button shows 'Count: 0'
4	User clicks button	increment() called, count.value++	count updates to 1	Button updates to 'Count: 1'
5	User clicks button again	count.value increments to 2	count updates to 2	Button updates to 'Count: 2'
6	No more clicks	count stable at 2	No change	Button shows 'Count: 2'
Exit	Component remains reactive	count reactive and updated	Template reflects count	Rendered output matches count value

💡 User stops clicking; reactive count stabilizes and template shows latest value.

Variable Tracker

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

Key Moments - 3 Insights

Why do we use count.value instead of just count?

Because count is a reactive ref object, the actual number is inside count.value. The execution_table rows 4 and 5 show count.value being incremented.

How does the template know to update when count changes?

Vue automatically tracks reactive refs declared in <script setup> and updates the template when their values change, as seen in the rendered output changes in execution_table rows 4 and 5.

Can we define functions directly inside <script setup>?

Yes, functions like increment are defined directly and bound to the template events, shown in execution_table step 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of count?

A 0

B undefined

C ref object

D null

💡 Hint

Check the 'Variable State' column at step 2 in execution_table.

At which step does the button label update to 'Count: 1'?

A Step 3

B Step 5

C Step 4

D Step 6

💡 Hint

Look at the 'Rendered Output' column in execution_table for when count changes to 1.

If we forgot to use count.value++ inside increment, what would happen?

A Vue would throw an error

B count would not change and button label stays the same

C count would increment anyway

D Button label would show 'undefined'

💡 Hint

Refer to how count.value is updated in execution_table steps 4 and 5.

Concept Snapshot

Vue <script setup> syntax:
- Use <script setup> block for concise component logic
- Declare reactive refs with ref() and access via .value
- Define functions directly for template events
- Variables and functions auto-expose to template
- Vue tracks reactivity and updates DOM automatically

Full Transcript

This visual execution trace shows how Vue's <script setup> syntax works. We start by importing ref and declaring a reactive variable count with initial value 0. Then we define an increment function that increases count.value. The template binds count and the increment function to a button. When the button is clicked, increment runs, count.value increases, and Vue updates the button label reactively. The variable tracker shows count.value changing from 0 to 2 after two clicks. Key moments clarify why .value is needed and how template updates happen automatically. The quiz tests understanding of reactive state and template binding in <script setup>.