Computed Properties
Penjelasan
computed() membuat nilai TURUNAN dari data reaktif lain — bedanya dengan fungsi biasa, hasil computed() di-CACHE dan cuma dihitung ULANG saat salah satu dependency di dalamnya benar-benar berubah, bukan setiap kali komponen dirender ulang. Cocok untuk kalkulasi yang bergantung pada state lain, mis. total harga dari daftar item.
Contoh Konsep
<script setup>
import { ref, computed } from 'vue';
const harga = ref(100000);
const jumlah = ref(2);
const total = computed(() => harga.value * jumlah.value); // otomatis update kalau harga/jumlah berubah
</script>
<template>
<p>Total: Rp {{ total }}</p>
<button @click="jumlah++">Tambah Jumlah</button>
</template>Praktikum
Buat ref() nilaiUjian (array angka, mis. [80, 90, 70]). Buat computed() bernama rataRata yang menghitung rata-rata isi array itu. Tampilkan rataRata di template.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Pakai computed() untuk nilai TURUNAN (hasil kalkulasi dari data lain), BUKAN untuk method biasa yang dipanggil dari event (mis. saat tombol diklik) — kalau kamu memanggilnya seperti fungsi computed()() di template, itu tanda seharusnya dipakai method biasa, bukan computed.