javascript / expert
Snippet
Stateless Functional Components for High-Density UI
In Vue 3, functional components are simple functions that return VNodes. Because they lack an internal instance (no 'this'), they are extremely lightweight and fast. This is the optimal pattern for 'leaf' nodes in large lists or data tables where creating thousands of full component instances would degrade performance.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { h } from 'vue';const RenderItem = (props, { slots }) => {return h('div', { class: 'item-wrapper', onClick: props.onItemClick }, [h('span', { class: 'label' }, props.label),slots.default?.()]);};RenderItem.props = ['label', 'onItemClick'];export default RenderItem;
vue
Breakdown
1
const RenderItem = (props, { slots }) => {
A pure function receiving props and context, bypassing the standard component initialization.
2
return h('div', ...);
Uses the hyperscript function to manually define the virtual DOM structure.