Understanding Functional Components

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const title = ref('Stateless Functional Component');
const message = ref('This component does not maintain any state.');
</script>

<style>
div {
  text-align: center;
}

h1 {
  color: #333;
}

p {
  color: #666;
}
</style>

This Vue.js 3 functional component is stateless as it doesn't maintain any reactive state. All it does is receive props, if any, and renders them. This example doesn't take any props but demonstrates a static message. Since it is stateless, Vue can optimize re-rendering for performance, as it knows that the output of the render function is solely determined by the props.