Setup function basics in Vue - Step-by-Step Execution

Concept Flow - Setup function basics

Component starts

↓

Call setup()

↓

Declare reactive state

↓

Return state and methods

↓

Template uses returned values

↓

Component renders with reactive data

The setup function runs first in a Vue component, sets up reactive state and methods, then returns them for the template to use.

Execution Sample

Vue

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

This code creates a reactive count variable and an increment function inside setup, then returns them for the template.

Execution Table

Step	Action	Evaluation	Result
1	Call setup()	Runs setup function	Setup function starts
2	Declare count = ref(0)	Creates reactive count with value 0	count.value = 0
3	Define increment()	Function increments count.value	increment() ready
4	Return { count, increment }	Expose reactive state and method	Returned object with count and increment
5	Template uses count	Reads count.value	Displays 0 initially
6	Call increment()	count.value++	count.value becomes 1
7	Template re-renders	Reflects updated count.value	Displays 1

💡 Setup function completes after returning reactive state and methods

Variable Tracker

Variable	Start	After Step 2	After Step 6	Final
count.value	undefined	0	1	1

Key Moments - 3 Insights

Why do we use ref() for count inside setup?

ref() makes count reactive so Vue tracks changes and updates the template automatically, as shown in execution_table step 2 and 7.

What happens if we don't return count and increment from setup?

The template cannot access them, so no reactive updates happen. This is why returning them in step 4 is essential.

Why do we access count.value instead of count directly?

ref() wraps the value inside an object; .value accesses the actual data, as seen in steps 2 and 6.

Visual Quiz - 3 Questions

Look at the execution table, what is count.value after step 2?

A undefined

B 0

C 1

D null

💡 Hint

Check the 'Result' column at step 2 in the execution_table.

At which step does the template first display the updated count value?

A Step 7

B Step 6

C Step 5

D Step 4

💡 Hint

Look for when the template re-renders with the new count in execution_table step 7.

If we forget to return increment from setup, what happens?

A Template can still call increment

B count stops being reactive

C increment is not accessible in template

D Setup function errors out

💡 Hint

Refer to key_moments about returning values from setup and execution_table step 4.

Concept Snapshot

Setup function runs first in Vue component.
Declare reactive state with ref() or reactive().
Define methods inside setup.
Return state and methods for template use.
Template accesses returned values reactively.
Use .value to access ref() data.

Full Transcript

In Vue, the setup function is the first code that runs when a component starts. Inside setup, you create reactive variables using ref() or reactive(). You can also define functions to change these variables. After setting up, you return the reactive variables and functions so the template can use them. The template then shows the current values and updates automatically when the reactive data changes. For example, a count variable created with ref(0) starts at zero. When you call an increment function that adds one to count.value, the template updates to show the new count. Remember, ref() wraps the value, so you use .value to get or set the actual data. If you forget to return a variable or function from setup, the template cannot access it and won't update. This flow helps Vue components stay reactive and easy to manage.

Practice

1. What is the main purpose of the setup function in a Vue 3 component?

easy

A. To register global components

B. To define reactive data and functions before the component renders

C. To handle routing between pages

D. To style the component using CSS

Solution

1. Step 1: Understand the role of setup in Vue 3

   The setup function is where you declare reactive data and functions that the component will use.

2. Step 2: Compare with other options

   Styling, routing, and global registration are handled elsewhere, not in setup.

3. Final Answer:

   To define reactive data and functions before the component renders -> Option B

4. Quick Check:

   Setup function = reactive data + functions [OK]

Hint: Remember: setup is for data and logic, not styling or routing [OK]

Common Mistakes:

• Confusing setup with styling or routing
• Thinking setup runs after rendering
• Assuming setup registers global components

2. Which of the following is the correct way to declare a reactive variable inside the setup function using Vue 3 Composition API?

easy

A. const count = useState(0);

B. const count = reactive(0);

C. const count = reactive({ value: 0 });

D. const count = ref(0);

Solution

1. Step 1: Identify correct reactive declaration for simple values

   For simple reactive variables like numbers, ref is used, e.g., const count = ref(0);.

2. Step 2: Check other options

   reactive is for objects, not primitives; useState is not a Vue function.

3. Final Answer:

   const count = ref(0); -> Option D

4. Quick Check:

   Simple reactive variable = ref() [OK]

Hint: Use ref() for single values, reactive() for objects [OK]

Common Mistakes:

• Using reactive() for primitive values
• Trying to use non-existent useState()
• Wrapping primitive in reactive({ value: ... }) unnecessarily

3. Consider this Vue 3 component setup code:

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello');
    function update() {
      message.value = 'Hi';
    }
    return { message, update };
  }
}

What will be the value of message after calling update()?

medium

A. 'Hi'

B. undefined

C. 'Hello'

D. An error occurs

Solution

1. Step 1: Understand ref and updating its value

   message is a ref holding 'Hello'. Calling update() sets message.value to 'Hi'.

2. Step 2: Determine final value after update

   After update(), message.value is 'Hi', so message reactive variable reflects 'Hi'.

3. Final Answer:

   'Hi' -> Option A

4. Quick Check:

   Ref value updated correctly = 'Hi' [OK]

Hint: Remember to access .value to update ref variables [OK]

Common Mistakes:

• Forgetting to use .value to update ref
• Assuming message itself changes, not message.value
• Thinking update() does not affect message

4. Identify the error in this Vue 3 setup function:

import { ref } from 'vue';

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

medium

A. setup function should return a single object

B. Missing import of reactive

C. Cannot assign to ref variable directly; should use count.value

D. increment function is not declared correctly

Solution

1. Step 1: Check how ref variables are updated

   Ref variables hold their value inside .value. Direct assignment like count = count + 1 is invalid.

2. Step 2: Correct way to update ref

   Use count.value = count.value + 1 or count.value++ to update.

3. Final Answer:

   Cannot assign to ref variable directly; should use count.value -> Option C

4. Quick Check:

   Update ref with .value [OK]

Hint: Always update ref with .value, not direct assignment [OK]

Common Mistakes:

• Assigning directly to ref variable
• Forgetting to use .value when updating
• Confusing reactive and ref update syntax

5. You want to create a Vue 3 component using <script setup> that has a reactive object with properties name and age. Which code correctly defines this reactive object and updates age by 1 inside setup?

hard

A. import { reactive } from 'vue';

const person = reactive({ name: 'Alice', age: 30 });
person.age++;

B. import { ref } from 'vue';

const person = ref({ name: 'Alice', age: 30 });
person.age++;

C. import { reactive } from 'vue';

const person = reactive({ name: 'Alice', age: 30 });
person = { ...person, age: person.age + 1 };

D. import { ref } from 'vue';

const person = ref({ name: 'Alice', age: 30 });
person.value.age = person.age + 1;

Solution

1. Step 1: Choose correct reactive type for object

   Use reactive for objects to make all properties reactive.

2. Step 2: Update property correctly

   With reactive, update properties directly like person.age++. Using ref with objects requires accessing .value.

3. Final Answer:

   import { reactive } from 'vue'; const person = reactive({ name: 'Alice', age: 30 }); person.age++; -> Option A

4. Quick Check:

   Reactive object updated directly =

   import { reactive } from 'vue';
   
   const person = reactive({ name: 'Alice', age: 30 });
   person.age++;
   

   [OK]

Hint: Use reactive() for objects, update properties directly [OK]

Common Mistakes:

• Using ref for objects without .value access
• Reassigning reactive object instead of updating property
• Trying to increment property on ref object without .value