javascript / expert
Snippet
Zustandlose funktionale Komponenten für High-Density UIs
In Vue 3 sind funktionale Komponenten einfache Funktionen, die VNodes zurückgeben. Da sie keine interne Instanz besitzen (kein 'this'), sind sie extrem leichtgewichtig und schnell. Dies ist das optimale Muster für 'Blatt'-Knoten in großen Listen oder Datentabellen, bei denen das Erstellen tausender vollständiger Komponenteninstanzen die Leistung beeinträchtigen würde.
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
Erklärung
1
const RenderItem = (props, { slots }) => {
Eine reine Funktion, die Props und Kontext empfängt und die Standard-Komponenteninitialisierung umgeht.
2
return h('div', ...);
Verwendet die Hyperscript-Funktion, um die virtuelle DOM-Struktur manuell zu definieren.