Data reaktif adalah data yang diawasi Vue: begitu nilainya berubah, bagian tampilan yang membacanya ikut diperbarui. Bayangin dapur Warung Bu Sri. Koki selalu melihat papan pesanan di dinding. Kalau pelayan menulis "Es Teh × 2" di papan itu, koki langsung tahu. Kalau pelayan cuma mencatatnya di buku saku sendiri, koki gak pernah tahu ada perubahan. Di Vue, kokinya Vue, papannya data reaktif, dan buku saku itu variabel biasa.
🧪 Tebakan cepat: Script berisi
let jumlah = 1, dan tombol +1 menjalankanjumlah++laluconsole.log(jumlah). Sesudah tiga klik, console mencetak4. Layarnya menampilkan berapa? Tebak dulu, jawabannya ada di bagian "Kenapa variabel biasa gak cukup".
Kenapa variabel biasa gak cukup
let jumlah = 1
function tambah() {
jumlah++
console.log("jumlah:", jumlah)
}
---template---
<p>Es Teh × {{ jumlah }}</p>
<button @click="tambah">+1</button>
| Kejadian | Console | Layar |
|---|---|---|
| Halaman tampil | Es Teh × 1 | |
| Klik +1 | jumlah: 2 | Es Teh × 1 |
| Klik +1 | jumlah: 3 | Es Teh × 1 |
| Klik +1 | jumlah: 4 | Es Teh × 1 |
Layarnya tetap 1. Itu jawaban tebakannya. Variabelnya memang naik, console buktinya, tapi gak ada yang memberi tahu Vue. Vue gak merender ulang, jadi <p> tetap menampilkan nilai waktu halaman pertama tampil.
ref(): kotak yang diawasi Vue
const jumlah = ref(1)
function tambah() {
jumlah.value++
console.log("jumlah:", jumlah.value)
}
---template---
<p>Es Teh × {{ jumlah }}</p>
<button @click="tambah">+1</button>
| Kejadian | jumlah.value |
Layar |
|---|---|---|
| Halaman tampil | 1 | Es Teh × 1 |
| Klik +1 | 2 | Es Teh × 2 |
| Klik +1 | 3 | Es Teh × 3 |
ref(1)membungkus angka 1 dalam sebuah kotak, object dengan satu propertivalue. Vue mengawasi kotak itu.- Di script, isinya dibaca dan diubah lewat
.value:jumlah.value++. Kalauconst nama = ref("Vue"),console.log(nama.value)mencetakVue, sedangkanconsole.log(nama)mencetak kotaknya, bukan teksnya. - Di template, Vue membuka kotaknya sendiri, jadi cukup
{{ jumlah }}. Karena itu@click="jumlah++"langsung di template juga jalan. constaman dipakai: yang diganti cuma isi kotaknya, bukan kotaknya.refbisa menyimpan apa saja: angka, teks, boolean, array, atau object.- Di proyek sungguhan,
refdi-import dulu:import { ref } from "vue". Di editor latihanrefsudah tersedia, jadi baris itu boleh ditulis, boleh juga gak.
reactive(): object yang diawasi langsung
const keranjang = reactive({ menu: "Es Teh", jumlah: 1 })
function tambah() {
keranjang.jumlah++
}
---template---
<p>{{ keranjang.menu }} × {{ keranjang.jumlah }}</p>
<button @click="tambah">+1</button>
reactive()menerima object atau array dan mengembalikan versi yang diawasi Vue. Propertinya diakses langsung, tanpa.value.- Cuma untuk object.
reactive(0)gak membuat apa-apa jadi reaktif, dan build development menulis[Vue warn] value cannot be made reactive: 0. Angka dan teks pakairef. - Jangan dibongkar.
let { jumlah } = keranjangmenyalin angka 1 ke variabel biasa.jumlah++cuma mengubah salinannya:keranjang.jumlahtetap 1 dan layar gak bergerak. Kalau perlu dibongkar, pakaitoRefs:const { jumlah } = toRefs(keranjang)memberirefyang tersambung, jadijumlah.value++ikut mengubahkeranjang.jumlah. - Jangan diganti seluruhnya.
keranjang = reactive({ ... })membuat object baru, sedangkan tampilan masih memegang yang lama. Ubah propertinya satu per satu.
ref atau reactive?
ref() |
reactive() |
|
|---|---|---|
| Isinya | apa saja | object atau array |
| Di script | jumlah.value |
keranjang.jumlah |
| Di template | {{ jumlah }} |
{{ keranjang.jumlah }} |
| Diganti seluruhnya | aman: jumlah.value = 5 |
putus dari tampilan |
| Dibongkar | gak perlu | putus, kecuali lewat toRefs |
Dokumentasi Vue menyarankan ref() sebagai pilihan utama, karena aturannya satu dan berlaku untuk semua jenis data. reactive() cocok untuk object yang diubah per properti.
⚠️ Jebakan yang sering ketemu
- Lupa
.valuedi script.jumlah++padaconst jumlah = ref(1)mencoba mengganti kotaknya, dan JavaScript berhenti denganTypeError: Assignment to constant variable.Di script tulisjumlah.value++. - Menulis
.valuedi template. Di templatejumlahsudah angka, jadi{{ jumlah.value }}tampil kosong. Cukup{{ jumlah }}. - Variabel biasa untuk data yang berubah.
let jumlah = 1tampil sekali lalu diam. Latihan memeriksa bahwa kodenya memanggilref(...)ataureactive(...). - Membongkar
reactive. Salinan hasil bongkaran gak diawasi Vue. Pakaikeranjang.jumlahlangsung, atautoRefs.
TL;DR: Data yang mengubah tampilan harus reaktif, karena variabel biasa berubah tanpa Vue tahu dan layarnya diam. const jumlah = ref(1) membuat kotak yang diawasi Vue: di script baca dan ubah lewat jumlah.value, di template cukup {{ jumlah }}. console.log(nama.value) mencetak isinya. reactive({ ... }) cuma untuk object, propertinya diakses tanpa .value, dan jangan dibongkar dengan let { jumlah } = ... atau diganti seluruhnya, karena sambungannya ke tampilan putus. Kalau ragu, pakai ref().
