javascript / intermediate
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
1
2
3
4
5
6
7
8
9
10
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
1
h('button', ...)
The hyperscript function used to create a virtual DOM node manually.
2
slots.default?.()
Executes the default slot function to render children inside the button.