Options API: Membaca Kode Vue Lama

Dua gaya menulis komponen

Vue 3 mendukung dua API:

• Composition API (<script setup>) — yang kita pakai sepanjang kursus ini. Direkomendasikan untuk proyek baru.
• Options API — gaya dari Vue 2: komponen berupa objek dengan "opsi" bernama data, methods, computed, dsb. Masih didukung penuh dan sangat banyak ditemui di kode lama, tutorial lawas, dan pustaka.

Keduanya setara kemampuannya. Memahami Options API penting agar kamu tidak bingung saat membaca proyek warisan.

Contoh komponen Options API

<template>
  <button @click="tambah">{{ judul }}: {{ jumlah }} (x2 = {{ ganda }})</button>
</template>

<script>
export default {
  props: ['judul'],
  emits: ['berubah'],

  data() {
    return { jumlah: 0 }            // state reaktif
  },

  computed: {
    ganda() { return this.jumlah * 2 },
  },

  watch: {
    jumlah(baru) { this.$emit('berubah', baru) },
  },

  methods: {
    tambah() { this.jumlah++ },
  },

  mounted() {
    console.log('Komponen terpasang')
  },
}
</script>

Mengenal this

Di Options API, semua data, props, computed, dan method diakses lewat this: this.jumlah, this.tambah(), this.$emit(...), this.$refs.kolom. Karena itu jangan memakai arrow function untuk methods — arrow function tidak punya this yang benar.

Peta Options API ↔ Composition API

Mengapa Composition API lebih disarankan?

• Logika yang berkaitan bisa dikelompokkan bersama (di Options API tercecer di data, methods, watch).
• Penggunaan ulang lewat composable lebih bersih daripada mixin.
• Dukungan TypeScript lebih baik.
• Kode lebih ringkas dengan <script setup>.

Bolehkah dicampur?

Boleh. Satu proyek bisa memiliki komponen lama dengan Options API dan komponen baru dengan Composition API. Satu komponen pun bisa memakai setup() bersama opsi lain, meski tidak dianjurkan.

Kesalahan umum

• Arrow function di methods/computed → this menjadi undefined.
• Lupa this. saat mengakses data di dalam method.
• Memakai <script setup> dan export default {...} pada blok yang sama tanpa paham aturannya; pilih satu gaya per komponen.