Baik teman-teman, pada sesi kali ini kita akan membahas dua konsep penting dalam Vue 3 yang akan sangat sering kalian temui dalam pengembangan aplikasi modern berbasis reaktivitas, yaitu computed dan watch. Kita akan bahas ini dengan santai, tapi tetap menyeluruh supaya kita bisa memahami bukan hanya cara pakainya, tapi juga kapan dan kenapa kita menggunakannya.

Implementasi di Laravel + Vue (Inertia)

1. Tambahkan Route

Di file routes/web.php, kita tambahkan route baru:

Route::get('/form-nama', function () {
    return Inertia::render('FormNama');
});

2. Buat File Vue FormNama.vue

Buat file Vue di resources/js/Pages/FormNama.vue:

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('Kurnia')
const lastName = ref('Andi')

const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

<template>
  <div class="p-8 max-w-lg mx-auto">
    <h1 class="text-2xl font-bold mb-4">Form Nama Lengkap</h1>

    <div class="mb-4">
      <label class="block text-sm font-medium mb-1">Nama Depan</label>
      <input v-model="firstName" type="text" class="border p-2 w-full rounded" />
    </div>

    <div class="mb-4">
      <label class="block text-sm font-medium mb-1">Nama Belakang</label>
      <input v-model="lastName" type="text" class="border p-2 w-full rounded" />
    </div>

    <p class="mt-4 text-lg">
      <strong>Nama Lengkap:</strong> {{ fullName }}
    </p>
  </div>
</template>

3. Jalankan dan Uji

Sekarang jalankan Laravel, lalu buka http://localhost:8000/form-nama. Coba ubah nama depan atau belakang, dan perhatikan bahwa nama lengkap akan berubah otomatis. Di sinilah keunggulan computed: kita tidak perlu lagi menulis ulang logika penggabungan nama.

Catatan Tambahan

• Computed tidak dipanggil setiap kali komponen dirender ulang, hanya saat dependensinya berubah.
• Cocok digunakan untuk data yang diturunkan dari data lain, misalnya total harga, nama lengkap, atau status aktif.

Watch: Menyadap dan Merespon Perubahan

Konsep Dasar

Kalau tadi computed kita gunakan untuk menghasilkan nilai turunan, maka watch kita pakai ketika kita ingin menjalankan sebuah aksi saat sebuah data berubah.

Contoh kasusnya, kita ingin tahu apakah usia pengguna sudah dewasa atau belum. Kita juga ingin menampilkan pesan di konsol setiap kali nilai usia berubah.

Implementasi

1. Tambahkan Route

Di routes/web.php:

Route::get('/form-usia', function () {
    return Inertia::render('FormUsia');
});

2. Buat File Vue FormUsia.vue

<script setup>
import { ref, watch } from 'vue'

const usia = ref(17)

watch(usia, (newVal, oldVal) => {
  if (newVal >= 18) {
    console.log('Sudah dewasa.')
  } else {
    console.log('Belum dewasa.')
  }
})
</script>

<template>
  <div class="p-8 max-w-lg mx-auto">
    <h1 class="text-2xl font-bold mb-4">Form Usia</h1>

    <div class="mb-4">
      <label class="block text-sm font-medium mb-1">Masukkan Usia</label>
      <input
        type="number"
        v-model="usia"
        class="border p-2 rounded w-full"
        min="0"
      />
    </div>

    <p class="mt-4 text-lg">
      <strong>Status:</strong>
      <span v-if="usia >= 18">Sudah dewasa</span>
      <span v-else>Belum dewasa</span>
    </p>
  </div>
</template>

Jalankan http://localhost:8000/form-usia, dan coba ubah nilai usia di input field. Perhatikan bahwa setiap kali angka usia diubah, akan muncul pesan baru di console—baik itu "Sudah dewasa" atau "Belum dewasa". Ini membuktikan bahwa fungsi watch() merespon perubahan data secara realtime, dan bisa kita gunakan untuk menjalankan logika tertentu sesuai kebutuhan.

Catatan Tambahan

• Fungsi watch() tidak mengembalikan nilai seperti computed, tapi lebih berfungsi sebagai pengawas yang siap bertindak.
• Watch sangat cocok digunakan dalam situasi di mana perubahan data perlu menghasilkan efek samping, seperti:
  • Menjalankan validasi input secara langsung saat user mengisi form.
  • Melakukan sinkronisasi otomatis antar form, misalnya ketika dua kolom data saling tergantung.
  • Mengirim data ke API begitu nilai tertentu diubah oleh pengguna.
  • Menampilkan alert atau pesan konfirmasi.
  • Atau, dalam kasus lain, bisa juga untuk keperluan logging atau debugging di console.

Jadi bisa kita simpulkan bahwa watch() sangat berguna bukan untuk menghasilkan tampilan, tapi untuk menjalankan logika atau aksi yang mengikuti perubahan state aplikasi.

Kapan Harus Menggunakan Computed, dan Kapan Harus Menggunakan Watch?

Kita simpulkan dalam bentuk pertanyaan:

• Jika teman-teman ingin menghasilkan nilai baru dari data yang sudah ada, pakai computed.
• Tapi kalau teman-teman ingin menjalankan aksi (seperti menyimpan ke server atau menampilkan alert), maka gunakan watch.

Kesimpulan

• Computed dan Watch adalah dua alat bantu reaktivitas yang punya peran masing-masing.
• Computed dipakai untuk menghitung nilai, dan hanya bekerja saat dibutuhkan.
• Watch digunakan untuk merespons perubahan data dan menjalankan aksi tertentu.

Jadi, saat sedang mengembangkan aplikasi dengan Vue, teman-teman tinggal tanyakan ke diri sendiri:

Saya ingin menghitung data turunan, atau ingin menjalankan efek dari perubahan?

Itu akan membantu menentukan mana yang paling tepat: computed atau watch.

Sampai di sini dulu pembahasan kita, silakan praktikkan langsung dan eksplorasi dengan variasi kasus lain. Kita lanjutkan lagi pada sesi berikutnya.