0
0
Vueframework~10 mins

Functional components in Vue - Step-by-Step Execution

Choose your learning style9 modes available
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
StepActionInput PropsRender OutputNotes
1Call functional component{ name: 'Alice' }h('div', 'Hello, Alice!')Props received as input
2Return render output{ name: 'Alice' }h('div', 'Hello, Alice!')VNode created for rendering
3Vue renders VNodeN/AHello, Alice! shown in DOMOutput appears on page
4Call functional component{ name: 'Bob' }h('div', 'Hello, Bob!')Props changed to Bob
5Return render output{ name: 'Bob' }h('div', 'Hello, Bob!')VNode updated
6Vue renders VNodeN/AHello, Bob! shown in DOMDOM updates with new greeting
7No internal stateN/AN/AComponent is stateless, no reactivity inside
8ExitN/AN/ARendering complete
💡 Rendering stops after output is created and shown; functional components do not hold state or lifecycle.
Variable Tracker
VariableStartAfter Step 1After Step 4Final
propsundefined{ name: 'Alice' }{ name: 'Bob' }N/A
render outputundefinedh('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
Test your understanding
Look at the execution table, what is the render output at step 2?
Ah('div', 'Hello, Alice!')
BHello, Alice!
C<div>Hello, Alice!</div>
Dundefined
💡 Hint
Check the 'Render Output' column at step 2 in the execution_table.
At which step does the component receive new props?
AStep 1
BStep 3
CStep 4
DStep 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?
AStep 2, because render output would be different
BStep 7, because state would be tracked
CStep 4, because props would not change
DStep 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.