Hochperformante funktionale Komponenten

Snippet

Hochperformante funktionale Komponenten

Funktionale Komponenten sind zustandslos und instanzlos, was sie deutlich schneller macht als reguläre Komponenten. Sie eignen sich am besten für einfache Darstellungselemente, die keine Lifecycle-Hooks benötigen.

snippet.js
javascript
import { h } from 'vue';
 
const MyButton = (props, { slots }) => {
  return h('button', { 
    class: ['btn', `btn-${props.type}`],
    onClick: () => console.log('Clicked!')
  }, slots.default?.());
};
 
MyButton.props = ['type'];

vue

Erklärung

h('button', ...)

Die Hyperscript-Funktion, die verwendet wird, um manuell einen virtuellen DOM-Knoten zu erstellen.

slots.default?.()

Führt die Standard-Slot-Funktion aus, um Kinder innerhalb des Buttons zu rendern.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwandt

Aus deiner Bibliothek