Computed Property

Masalah: logika di template jadi berantakan

<p>Total: {{ keranjang.reduce((t, b) => t + b.harga * b.qty, 0) }}</p>

Ekspresi sepanjang itu sulit dibaca, dan kalau dipakai di tiga tempat, kamu menghitungnya tiga kali. Solusinya: computed property — data turunan yang dihitung dari data lain.

Membuat computed

import { ref, computed } from 'vue'

const keranjang = ref([
  { nama: 'Buku', harga: 50000, qty: 1 },
  { nama: 'Pulpen', harga: 5000, qty: 4 },
])

const total = computed(() => {
  return keranjang.value.reduce((t, b) => t + b.harga * b.qty, 0)
})

// di template: {{ total }}  (tanpa .value)

computed menerima fungsi getter dan mengembalikan ref yang read-only. Di script akses dengan total.value, di template cukup total.

Caching: kelebihan utama

Computed menyimpan hasil (cache) dan hanya menghitung ulang bila data yang dipakainya berubah. Jika total dipanggil 10 kali tanpa perubahan data, penghitungan hanya terjadi sekali.

Computed bertingkat

Computed boleh bergantung pada computed lain.

const adaDiskon = computed(() => total.value > 100000)
const totalAkhir = computed(() => adaDiskon.value ? Math.round(total.value * 0.9) : total.value)

Computed yang bisa ditulis (getter + setter)

const namaLengkap = computed({
  get: () => depan.value + ' ' + belakang.value,
  set: (nilai) => {
    const [d, b] = nilai.split(' ')
    depan.value = d
    belakang.value = b ?? ''
  },
})
namaLengkap.value = 'Budi Santoso'   // memecah ke depan & belakang

Pakai bentuk ini seperlunya; umumnya computed cukup read-only.

Aturan emas getter

• Murni: hanya menghitung dan return. Jangan mengubah data lain, memanggil API, atau memanipulasi DOM di dalam computed.
• Jangan mengubah hasil computed secara langsung; ubah data sumbernya.
• Hasil computed adalah "snapshot" — kalau perlu mengubah, buat salinan: [...daftar.value].sort(), bukan daftar.value.sort().

Kesalahan umum

• Menulis total = 10 pada computed read-only → peringatan "Write operation failed".
• Efek samping di computed (mis. fetch) — itu tugas watch (bab berikutnya).
• Lupa .value saat computed dipakai dalam computed lain atau di script.