javascript / expert
Snippet
Rekursive funktionale Komponenten für performante Baumstrukturen
Funktionale Komponenten in Vue 3 (einfache Funktionen, die VNodes zurückgeben) sind zustandslos und hocheffizient für das Rendering tiefer, rekursiver Strukturen wie Dateibäume. Die direkte Verwendung der 'h'-Funktion vermeidet den Template-Kompilierungs-Overhead bei jedem rekursiven Schritt.
snippet.js
1
2
3
4
5
6
const Tree = (props, { slots }) => {return h('div', props.data.map(item => [h('span', item.label),item.children && h(Tree, { data: item.children })]));};
vue
Erklärung
1
const Tree = (props, { slots }) => {
Definiert eine funktionale Komponente, die Props und Kontext akzeptiert.
2
return h('div', props.data.map(item => [
Erzeugt eine Wurzel-VNode und iteriert über das Daten-Array.
3
item.children && h(Tree, { data: item.children })
Ruft die Komponente rekursiv selbst auf, wenn verschachtelte Kinder existieren.