# Komponen Fungsional
breaking

# Gambaran Umum

Berikut merupakan gambaran umum tentang perubahan yang terjadi:

Peningkatan performa komponen fungsional yang terdapat pada Vue versi 2.x dapat diabaikan pada Vue versi 3.x, sehingga kami menyarankan Anda untuk menggunakan komponen stateful.
Komponen fungsional hanya dapat dibuat menggunakan sebuah fungsi biasa yang menerima props dan context (yang di dalamnya terdapat slots, attrs, dan emit) sebagai parameter.
MERUSAK Atribut fungsional pada tag <template> milik single-file component (SFC) dihapus.
MERUSAK Opsi { functional: true } pada komponen yang dibuat dengan fungsi dihapus.

Lanjutkan membaca untuk informasi lebih lanjut.

# Pengenalan

Pada Vue versi 2, komponen fungsional memiliki dua kasus penggunaan yaitu:

sebagai sebuah bentuk optimisasi performa, karena komponen fungsional akan diinisialisasi lebih cepat dibandingkan dengan komponen stateful.
agar dapat menghasilkan lebih dari satu node utama.

Namun, pada Vue versi 3, performa dari komponen stateful telah ditingkatkan sehingga perbedaan performa antara komponen stateful dan komponen fungsional dapat diabaikan. Sebagai tambahan, saat ini komponen stateful juga sudah dapat menghasilkan lebih dari satu node utama.

Sehingga, satu-satunya kasus penggunaan dari komponen fungsional adalah komponen-komponen sederhana, seperti sebuah komponen yang menghasilkan heading yang dinamis. Selain itu, kami menyarankan Anda untuk menggunakan komponen stateful seperti biasanya.

# Sintaks Vue versi 2.x

Pada komponen <dynamic-heading>, yang berfungsi untuk menghasilkan heading yang sesuai (entah h1, h2, h3, dan lain-lain), komponen tersebut dapat ditulis dalam sebuah single-file component pada Vue versi 2.x sebagai:

// Contoh komponen fungsional Vue versi 2
export default {
  functional: true,
  props: ['level'],
  render(h, { props, data, children }) {
    return h(`h${props.level}`, data, children)
  }
}

1
2
3
4
5
6
7
8

Atau, bagi Anda yang lebih suka menggunakan <template> dalam single-file component:

// Contoh komponen fungsional Vue versi 2 menggunakan <template>
<template functional>
  <component
    :is="`h${props.level}`"
    v-bind="attrs"
    v-on="listeners"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Sintaks Vue versi 3.x

# Komponen yang Dibuat oleh Fungsi

Sekarang pada Vue versi 3, seluruh komponen fungsional dibuat menggunakan sebuah fungsi biasa. Dengan kata lain, Anda tidak perlu untuk mendefinisikan { functional: true } pada pengaturan komponen.

Fungsi tersebut akan menerima dua argumen: props dan context. Argumen context adalah sebuah objek yang memuat properti attrs, slots, dan emit untuk komponen tersebut.

Sebagai tambahan, dibandingkan dengan menyediakan h dalam fungsi render secara implisit, sekarang h akan diimpor secara global.

Mengacu pada komponen <dynamic-heading> sebelumnya, berikut merupakan cara penulisan komponen tersebut sekarang:

import { h } from 'vue'

const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}

DynamicHeading.props = ['level']

export default DynamicHeading

1
2
3
4
5
6
7
8
9

# Single File Components (SFCs)

Pada Vue versi 2.x, perbedaan performa antara komponen stateful dan fungsional berkurang secara drastis dan tidak signifikan untuk sebagian besar kasus penggunaan. Sehingga, cara migrasi bagi pengembang yang menggunakan atribut functional pada SFC adalah dengan menghapus atribut tersebut dan menamai ulang segala acuan pada props menjadi $props dan attrs menjadi $attrs.

Mengacu pada contoh <dynamic-heading> sebelumnya, berikut merupakan cara penulisan komponen tersebut sekarang:

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

Perbedaan utama dari kedua cara penulisan tersebut adalah:

Atribut functional dihapus dari <template>
Sekarang, listeners diteruskan sebagai bagian dari $attrs dan dapat dihapus

# Langkah Selanjutnya

Anda dapat memperoleh informasi lebih lanjut mengenai penggunaan komponen fungsional yang baru dan perubahan pada fungsi render melalui:

← Fragments API Global →

# Komponen Fungsional breaking