Snippet

High-Performance Functional Components

Functional components are stateless and instanceless, making them significantly faster than regular components. They are best used for simple presentational elements that don't require lifecycle hooks.

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

Breakdown

h('button', ...)

The hyperscript function used to create a virtual DOM node manually.

slots.default?.()

Executes the default slot function to render children inside the button.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

High-Performance Functional Components

Related