vue 3 computed watchers

📚 Artikel 8 dari 16 — Vue from Zero to Zorro

Computed & Watchers
Kalkulasi & Pantau Data Secara Otomatis

Capek nulis logika kalkulasi yang sama berulang kali di template? Atau bingung kapan harus pakai computed, watch, atau watchEffect di Vue 3? Tenang — setelah artikel ini kamu bakal paham tuntas.

#ComputedVue3 #WatchWatchEffect #BelajarVue #VueFrontEnd

⏱️ ~9 menit baca

🎯 Level: Pemula–Menengah

📅 2026

Bayangkan kamu punya toko online. Setiap kali ada pesanan masuk, kamu harus hitung sendiri total harga, diskon, ongkir, dan pajak — satu per satu. Melelahkan, kan? Nah, itulah rasanya kalau kamu menulis logika kalkulasi langsung di dalam template Vue tanpa menggunakan computed vue 3. Vue 3 punya dua senjata ampuh untuk urusan ini: Computed Properties untuk kalkulasi otomatis berbasis data, dan watch/watchEffect vue 3 untuk memantau perubahan data dan bereaksi terhadapnya. Keduanya wajib kamu kuasai kalau mau jadi developer Vue yang beneran produktif.

🧮 Computed Vue 3 — Kalkulator Otomatis yang Super Cerdas

Computed property adalah nilai yang diturunkan (derived) dari data lain. Seperti spreadsheet Excel — kamu punya kolom harga dan jumlah, lalu kolom total otomatis ngitung sendiri. Itulah esensi computed.

📐 Definisi Kunci

Computed Property adalah properti Vue yang nilainya dihitung secara otomatis berdasarkan reactive data lain. Vue akan meng-cache hasilnya dan hanya menghitung ulang ketika dependensinya berubah — bukan setiap kali komponen re-render!

Cara Pakai Computed di Vue 3 (Composition API)

1

Import computed dari Vue

// Composition API — script setup
import { ref, computed } from 'vue'

2

Definisikan data reaktif dan computed-nya

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

// Data reaktif
const harga = ref(50000)
const jumlah = ref(3)
const diskon = ref(0.1) // 10%

// Computed: otomatis hitung total setelah diskon
const totalBayar = computed(() => {
  const subtotal = harga.value * jumlah.value
  return subtotal - (subtotal * diskon.value)
})
</script>

<template>
  <!-- Langsung pakai di template, bersih! -->
  <p>Total Bayar: {{ totalBayar }}</p>
</template>

💡

Tips: Computed vs Method — Bedanya Apa?

Method dieksekusi setiap kali komponen re-render. Computed di-cache — hanya dihitung ulang kalau dependensinya berubah. Untuk kalkulasi yang sering ditampilkan, selalu pilih computed supaya performa tetap optimal.

3

Computed bisa ditulis juga! (Writable Computed)

Gunakan getter + setter agar computed bisa diubah nilainya dari luar.

const namaLengkap = computed({
  get() {
    return `${namaDepan.value} ${namaBelakang.value}`
  },
  set(nilaiBaru) {
    [namaDepan.value, namaBelakang.value] = nilaiBaru.split(' ')
  }
})

⚡

Insight: Jangan Buat Side Effect di Computed!

Computed hanya boleh mengembalikan nilai — jangan lakukan fetch API, ubah DOM, atau set data lain di dalamnya. Untuk side effect, gunakan watch atau watchEffect.

👁️ Watch & WatchEffect Vue 3 — Detektif Perubahan Data

Kalau computed bertugas menghasilkan nilai baru dari data lain, maka watch dan watchEffect vue 3 bertugas bereaksi ketika data berubah — menjalankan side effect seperti memanggil API, menyimpan ke localStorage, atau menampilkan notifikasi.

🔍 Definisi Kunci

watch() — mengamati satu atau lebih sumber reaktif secara eksplisit dan menjalankan callback ketika nilai berubah, memberikan akses ke nilai lama dan baru.

watchEffect() — otomatis melacak semua reactive dependency yang diakses di dalamnya dan langsung berjalan saat pertama kali dipanggil (eager by default).

Cara Pakai watch()

1

Watch satu sumber reaktif

import { ref, watch } from 'vue'

const keyword = ref('')

watch(keyword, (nilaiBaru, nilaiLama) => {
  console.log(`Pencarian berubah: ${nilaiLama} → ${nilaiBaru}`)
  // Bisa panggil API di sini!
  fetchHasilPencarian(nilaiBaru)
})

2

Watch beberapa sumber sekaligus

const kota = ref('Surabaya')
const tanggal = ref('2026-04-29')

watch([kota, tanggal], ([kotaBaru, tanggalBaru]) => {
  fetchCuaca(kotaBaru, tanggalBaru)
})

Cara Pakai watchEffect()

3

watchEffect otomatis deteksi dependensi

Kamu tidak perlu sebutkan sumber secara eksplisit — Vue akan memantau semua ref/reactive yang diakses di dalamnya.

import { ref, watchEffect } from 'vue'

const userId = ref(1)
const tab = ref('profil')

// Langsung jalan pertama kali dan setiap kali userId / tab berubah
watchEffect(() => {
  fetchDataUser(userId.value, tab.value)
})

⚠️

Perhatian: Stop Watcher Kalau Tidak Diperlukan!

watch dan watchEffect otomatis berhenti saat komponen di-unmount. Tapi kalau kamu membuat watcher di luar setup() atau secara async, simpan return value-nya dan panggil stop() manual untuk menghindari memory leak.

⚖️ Computed vs Watch vs WatchEffect — Kapan Pakai yang Mana?

Ini pertanyaan yang paling sering bikin bingung para pemula Vue 3. Jawabannya sederhana kalau kamu paham tujuan masing-masing.

🧭 Panduan Cepat: Gunakan yang Mana?

🧮

Pakai Computed kalau...

Kamu butuh nilai baru yang diturunkan dari data lain dan ditampilkan di template. Contoh: total harga, nama lengkap, daftar item yang difilter.

👁️

Pakai Watch kalau...

Kamu perlu tahu nilai lama dan baru setelah perubahan, atau ingin menjalankan side effect hanya saat nilai spesifik berubah. Contoh: panggil API saat id berubah.

⚡

Pakai WatchEffect kalau...

Kamu ingin side effect langsung jalan pertama kali dan setiap kali dependensi apapun berubah — tanpa harus deklarasi sumber secara manual. Cocok untuk sinkronisasi data.

Fitur	computed	watch	watchEffect
Mengembalikan nilai	✅ Ya	❌ Tidak	❌ Tidak
Side effect	❌ Jangan!	✅ Ya	✅ Ya
Dapat nilai lama	❌	✅ Ya	❌
Jalan langsung pertama kali	✅ Otomatis	⚙️ Dengan immediate:true	✅ Otomatis
Lacak dependensi	✅ Otomatis	⚙️ Manual	✅ Otomatis

🔥

Fakta Menarik: watchEffect Lebih Baru dari watch!

watchEffect adalah API baru yang diperkenalkan di Vue 3 dan tidak ada di Vue 2. Ini terinspirasi dari useEffect di React — tapi lebih cerdas karena otomatis melacak dependensi reaktif tanpa perlu dependency array.

Contoh Nyata: Search Bar dengan Debounce

Mari gabungkan semuanya — computed untuk filter hasil, watch untuk trigger pencarian:

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

const keyword = ref('')
const semuaProduk = ref([
  { nama: 'Laptop Gaming', harga: 15000000 },
  { nama: 'Mouse Wireless', harga: 350000 },
  { nama: 'Keyboard Mekanikal', harga: 800000 },
])

// Computed: filter produk sesuai keyword (otomatis update!)
const produkTerfilter = computed(() =>
  semuaProduk.value.filter(p =>
    p.nama.toLowerCase().includes(keyword.value.toLowerCase())
  )
)

// Watch: log analitik setiap keyword berubah
let timer
watch(keyword, (baru) => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    console.log('User mencari:', baru) // kirim ke analytics
  }, 500)
})
</script>

<template>
  <input v-model="keyword" placeholder="Cari produk..." />
  <p>Ditemukan: {{ produkTerfilter.length }} produk</p>
  <ul>
    <li v-for="p in produkTerfilter" :key="p.nama">
      {{ p.nama }} — Rp{{ p.harga.toLocaleString() }}
    </li>
  </ul>
</template>

💾 Contoh di atas memadukan computed untuk filter + watch untuk analitik. Elegant!

⚡

Pro Tip: Gunakan watch dengan opsi deep: true untuk Object/Array

Secara default, watch hanya mendeteksi perubahan referensi. Kalau kamu watch sebuah object dan mengubah propertinya, tambahkan opsi { deep: true } agar perubahan nested ikut terpantau.

📚

Bagian dari Seri Lengkap

16 Artikel Belajar Vue: Vue from Zero to Zorro

Artikel ini adalah bagian ke-8 dari seri lengkap belajar Vue 3 dari nol sampai mahir. Mulai dari setup project hingga state management — semua ada!

📖 Lihat Semua Artikel Seri →

🎯 Kesimpulan — Sekarang Kamu Paham!

• Computed Vue 3 — untuk nilai turunan yang perlu ditampilkan di template, ter-cache otomatis, dan super efisien.
• watch — untuk bereaksi pada perubahan data spesifik, bisa akses nilai lama dan baru, cocok untuk side effect terarah.
• watchEffect — untuk side effect yang jalan langsung dan otomatis melacak semua dependensi reaktif.
• Jangan campuradukkan: computed untuk kalkulasi, watch/watchEffect untuk aksi.
• Gunakan computed + watch secara bersamaan untuk kebutuhan yang kompleks seperti search dengan analitik.

Dengan menguasai computed vue 3, watch, dan watchEffect vue 3, kamu sudah melewati salah satu milestone penting dalam perjalanan belajar Vue. Aplikasimu bakal lebih reaktif, efisien, dan mudah di-maintain. 🚀

Artikel ini helpful? Yuk bagikan ke teman yang lagi belajar Vue 3! 👇

#ComputedVue3 #WatchWatchEffect #BelajarVue #VueFrontEnd

💬 Ada pertanyaan atau pengalaman seru saat pakai computed/watch?

Tulis di kolom komentar — kita diskusi bareng!

🧭 Navigasi Seri Artikel

← Sebelumnya

Props & Emits — Cara Komponen Vue 3 Ngobrol Satu Sama Lain

→ Baca Artikel Sebelumnya

Selanjutnya →

Lifecycle Hooks di Vue 3 — Kapan Komponen Lahir, Hidup, dan Mati

→ Baca Artikel Selanjutnya