Functional Component Nedir?

Vue.js functional components, genellikle state (durum) yönetimi olmayan ve yalnızca girdi alıp çıktı üreten basit bileşenlerdir. Bu tür bileşenler, işlevsel programlamaya daha yakın bir yaklaşımla tasarlanmıştır. İşlevsel bileşenler, bir durum (state) yönetimine ihtiyaç duymazlar ve giriş aldıkları verilere dayanarak çıktı üretirler. Bu, fonksiyonel programlamanın temel prensiplerinden biridir.

Vue 3'te işlevsel bir bileşen, props ve context (attrs, slots, emit) alan ve sanal DOM düğümü döndüren düz bir fonksiyondur. Kendi durumu (state) ve bileşen örneği (this) yoktur.

import { createApp, h } from 'vue';

// Vue 3: işlevsel bileşen = props ve context alan düz bir fonksiyon
function MessageBox(props, { emit }) {
  return h('div', [
    h('p', props.message),
    h('button', { onClick: () => emit('select') }, 'Tıkla'),
  ]);
}
MessageBox.props = ['message'];
MessageBox.emits = ['select'];

createApp({
  render: () =>
    h(MessageBox, {
      message: 'Merhaba, ben işlevsel bir bileşenim!',
      onSelect: () => console.log('Düğmeye tıklandı'),
    }),
}).mount('#app');

Yukarıdaki örnekte MessageBox yalnızca kendisine verilen message prop'una göre çıktı üretir ve tıklamayı emit ile üst bileşene bildirir.

Not (Vue 2): Vue 2'de işlevsel bileşenler functional: true seçeneği veya <template functional> ile tanımlanıyordu. Vue 3'te bu seçenek kaldırılmıştır; aşağıdaki eski sözdizimi yalnızca Vue 2 projelerinde çalışır.

<template functional>
  <div>
    <p>{{ props.message }}</p>
    <button @click="props.onClick">Click me</button>
  </div>
</template>

<script>
export default {
  functional: true,
  props: {
    message: String,
    onClick: Function,
  },
};
</script>

Vue 2'de işlevsel bileşenler normal bileşenlerden belirgin şekilde hızlıydı. Vue 3'te normal bileşenlerin performansı o kadar iyileşti ki aradaki fark önemsiz hale geldi; bu yüzden işlevsel bileşenler yalnızca gerçekten basit ve durumsuz parçalar için önerilir.