Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Template Refs, bagaimana mengakses elemen DOM atau komponen anak secara langsung.
Pada artikel kali ini, kita akan membahas tentang Computed Properties dan Watchers, dua fitur penting di Vue yang sering digunakan untuk mengelola data turunan dan memantau perubahan state.
Apa Itu Computed Properties?
Computed properties adalah nilai turunan yang dihitung berdasarkan state lain.
Keunggulannya:
- Otomatis cache → hanya dihitung ulang jika dependensi berubah.
- Cocok untuk logika yang sifatnya "derived data".
Membuat Computed Property
<script setup>
import { ref, computed } from "vue"
const firstName = ref("Budi")
const lastName = ref("Santoso")
const fullName = computed(() => {
return firstName.value + " " + lastName.value
})
</script>
<template>
<p>Nama Lengkap: {{ fullName }}</p>
</template>
fullName akan otomatis update jika firstName atau lastName berubah.
Computed dengan Kondisi
<script setup>
import { ref, computed } from "vue"
const age = ref(20)
const status = computed(() => {
return age.value >= 18 ? "Dewasa" : "Anak-anak"
})
</script>
<template>
<p>Umur: {{ age }}</p>
<p>Status: {{ status }}</p>
</template>
Apa Itu Watchers?
Watchers digunakan untuk memantau perubahan state tertentu, lalu menjalankan efek samping (side effect).
Perbedaan dengan computed:
- Computed → menghasilkan nilai baru dari data.
- Watcher → menjalankan aksi ketika data berubah (misalnya fetch API, logging, validasi).
Watch State Tunggal
<script setup>
import { ref, watch } from "vue"
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log(`Count berubah dari ${oldVal} ke ${newVal}`)
})
</script>
<template>
<button @click="count++">Tambah</button>
</template>
Watch Beberapa State
<script setup>
import { ref, watch } from "vue"
const firstName = ref("Budi")
const lastName = ref("Santoso")
watch([firstName, lastName], ([newFirst, newLast]) => {
console.log("Nama baru:", newFirst, newLast)
})
</script>
Watch dengan Opsi
Kita bisa menambahkan opsi seperti:
immediate: true → langsung jalan saat komponen mount.deep: true → memantau object/array secara mendalam.
<script setup>
import { reactive, watch } from "vue"
const user = reactive({
name: "Budi",
address: { city: "Jakarta" }
})
watch(
() => user.address,
(newVal) => {
console.log("Alamat berubah:", newVal)
},
{ deep: true, immediate: true }
)
</script>
Kapan Pakai Computed vs Watch?
- Gunakan computed jika kita hanya perlu nilai turunan untuk ditampilkan.
- Gunakan watch jika kita perlu melakukan aksi/efek samping ketika data berubah.
Kesimpulan
Pada artikel ini, kita sudah belajar tentang:
- Computed Properties → untuk membuat nilai turunan dari state.
- Watchers → untuk menjalankan aksi saat state berubah.
Dua fitur ini sangat penting agar aplikasi Vue kita tetap reaktif, efisien, dan mudah di-maintain.
Di artikel berikutnya, kita akan membahas tentang Provide & Inject, fitur di Vue yang mirip dengan Context API di React untuk berbagi data antar komponen tanpa props drilling.
Terima kasih