Functional components in Vue - Step-by-Step Execution

Concept Flow - Functional components

Define functional component as a function

↓

Receive props as input

↓

Return render output (JSX or template)

↓

Vue renders output without internal state

↓

Component used in parent template

↓

Render output appears in DOM

Functional components are simple Vue components defined as functions that take props and return UI without internal state.

Execution Sample

Vue

import { h } from 'vue'

const Hello = (props) => {
  return h('div', `Hello, ${props.name}!`)
}

export default Hello

This code defines a functional component that renders a div greeting with the given name prop.

Execution Table

Step	Action	Input Props	Render Output	Notes
1	Call functional component	{ name: 'Alice' }	h('div', 'Hello, Alice!')	Props received as input
2	Return render output	{ name: 'Alice' }	h('div', 'Hello, Alice!')	VNode created for rendering
3	Vue renders VNode	N/A	Hello, Alice! shown in DOM	Output appears on page
4	Call functional component	{ name: 'Bob' }	h('div', 'Hello, Bob!')	Props changed to Bob
5	Return render output	{ name: 'Bob' }	h('div', 'Hello, Bob!')	VNode updated
6	Vue renders VNode	N/A	Hello, Bob! shown in DOM	DOM updates with new greeting
7	No internal state	N/A	N/A	Component is stateless, no reactivity inside
8	Exit	N/A	N/A	Rendering complete

💡 Rendering stops after output is created and shown; functional components do not hold state or lifecycle.

Variable Tracker

Variable	Start	After Step 1	After Step 4	Final
props	undefined	{ name: 'Alice' }	{ name: 'Bob' }	N/A
render output	undefined	h('div', 'Hello, Alice!')	h('div', 'Hello, Bob!')	VNode rendered in DOM

Key Moments - 2 Insights

Why doesn't the functional component have internal state or lifecycle methods?

Functional components are simple functions that only receive props and return UI. They do not create instances or hold state, as shown in execution_table rows 7 and 8.

How does the component update when props change?

When props change, the functional component is called again with new props (see step 4), returning new render output which Vue updates in the DOM (step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the render output at step 2?

A h('div', 'Hello, Alice!')

B Hello, Alice!

C <div>Hello, Alice!</div>

D undefined

💡 Hint

Check the 'Render Output' column at step 2 in the execution_table.

At which step does the component receive new props?

A Step 1

B Step 3

C Step 4

D Step 6

💡 Hint

Look for the step where props change from Alice to Bob in the execution_table.

If the component had internal state, which step would change in the execution_table?

A Step 2, because render output would be different

B Step 7, because state would be tracked

C Step 4, because props would not change

D Step 8, because rendering would never complete

💡 Hint

Refer to step 7 notes about internal state in the execution_table.

Concept Snapshot

Functional components in Vue are simple functions that take props and return UI.
They do not have internal state or lifecycle hooks.
They are called each time props change to produce fresh output.
Use them for simple, stateless UI pieces.
They improve performance by avoiding instance creation.

Full Transcript

Functional components in Vue are defined as plain functions that receive props as input and return a render output, usually a virtual node. They do not maintain internal state or lifecycle methods. When used in a parent template, Vue calls the function with current props and renders the returned output in the DOM. If props change, Vue calls the function again to update the UI. This makes functional components lightweight and efficient for simple UI parts.