Bab 3 dari 6 · 25 menit

Konsep Inti Vue

Reaktivitas merupakan jantung dari framework Vue. Pada Vue 3, sistem reaktivitas dibangun di atas fitur JavaScript Proxy. Ketika kamu mendefinisikan variabel reaktif, Vue membungkus objek tersebut dalam sebuah Proxy. Saat nilai dibaca oleh template atau komponen, Vue secara cerdas mencatat dependensi tersebut dalam tahapan pelacakan atau track. Ketika kamu memperbarui nilainya, Proxy mendeteksi mutasi dan memicu sinyal trigger ke seluruh bagian yang bergantung padanya sehingga Virtual DOM diperbarui secara tepat sasaran tanpa manipulasi elemen manual.

Dalam Composition API, data reaktif umumnya dibuat menggunakan ref() atau reactive(). ref() dirancang fleksibel untuk menampung seluruh tipe data, mulai dari nilai primitif seperti angka dan string hingga struktur data objek. Saat kamu bekerja di dalam blok script, kamu wajib mengakses nilai ref lewat properti .value. Namun saat variabel tersebut dipanggil di dalam blok template, Vue secara otomatis melakukan mekanisme unwrapping sehingga kamu tidak perlu menambahkan .value. Di sisi lain, fungsi reactive() khusus digunakan untuk objek kompleks, array, Map, dan Set. reactive() dapat diakses langsung tanpa .value, tetapi memiliki keterbatasan berupa hilangnya sifat reaktivitas apabila kamu melakukan destructuring variabel secara langsung.

Untuk menghubungkan data dengan tampilan antarmuka, kamu menggunakan sintaks template dan direktif bawaan. Direktif merupakan atribut HTML khusus berawalan v-. Beberapa direktif esensial antara lain v-bind (disingkat :) untuk mengikat atribut HTML secara dinamis, v-on (disingkat @) untuk menangkap aksi event pengguna, dan v-model untuk mewujudkan two-way data binding dua arah pada form input. Untuk pengendalian tampilan elemen, Vue menyediakan v-if/v-else dan v-show. Perbedaan krusialnya terletak pada eksekusi DOM: v-if benar-benar merender atau mencopot elemen dari pohon dokumen, sedangkan v-show selalu memuat elemen dan hanya memanipulasi properti CSS display.

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

const belanja = ref([
  { id: 1, barang: "Buku", harga: 25000 },
  { id: 2, barang: "Pena", harga: 5000 }
]);

const totalBayar = computed(() => {
  return belanja.value.reduce((total, item) => total + item.harga, 0);
});
</script>

<template>
  <ul>
    <li v-for="item in belanja" :key="item.id">
      {{ item.barang }} - Rp {{ item.harga }}
    </li>
  </ul>
  <p>Total: Rp {{ totalBayar }}</p>
</template>

Ketika menangani pengolahan data turunan, kamu sangat disarankan memanfaatkan computed property dibandingkan method biasa. Computed property memiliki sistem caching internal, artinya komputasi hanya akan dihitung ulang jika dependensi reaktifnya benar-benar berubah. Bila kamu memerlukan eksekusi aksi yang melibatkan efek samping asynchronous seperti memanggil API server atau menyimpan data ke localStorage, watcher melalui watch() atau watchEffect() adalah pilihan yang tepat. Siklus hidup sebuah komponen juga dapat kamu pantau melalui lifecycle hooks seperti onMounted() saat elemen DOM selesai dipasang, onUpdated() saat data memicu render ulang tampilan, serta onUnmounted() untuk membersihkan pemanggilan interval waktu atau koneksi listener guna menghindari kebocoran memori.

Cek pemahaman

1. Nilai variabel yang dibungkus dengan ref wajib diakses menggunakan ekstensi properti .value saat ditampilkan di dalam template HTML.
2. Kapan kamu sebaiknya memilih v-show dibandingkan v-if?

3. Hook manakah yang paling aman untuk menyisipkan operasi fetch data produk dari server pada kode berikut?

<script setup>
import { ref, onMounted } from 'vue';
const daftar = ref([]);

onMounted(async () => {
  const res = await fetch('/api/produk');
  daftar.value = await res.json();
});
</script>