Reactivity: ref() dan reactive()

Penjelasan

Composition API Vue punya dua cara membuat data reaktif: ref() untuk nilai TUNGGAL (primitif atau objek, diakses/diubah lewat .value di dalam <script>, tapi otomatis "terbuka" tanpa .value di <template>), dan reactive() khusus untuk OBJEK yang propertinya diakses langsung tanpa .value.

Contoh Konsep

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

const jumlah = ref(0); // diakses jumlah.value di script
const profil = reactive({ nama: 'Budi', umur: 20 }); // diakses profil.nama langsung

function tambah() {
    jumlah.value += 1; // WAJIB pakai .value di dalam script
}
</script>

<template>
    <p>Jumlah: {{ jumlah }}</p> <!-- TANPA .value di template -->
    <p>{{ profil.nama }}, {{ profil.umur }} tahun</p>
    <button @click="tambah">Tambah</button>
</template>

Praktikum

Buat ref() bernama nyala (boolean, awalnya false). Buat fungsi toggle() yang membalik nilainya (nyala.value = !nyala.value). Tampilkan teks "Lampu Nyala" atau "Lampu Mati" di template sesuai nilai nyala.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Lupa menulis .value saat mengakses/mengubah ref() DI DALAM <script> adalah kesalahan paling umum pemula Vue (mis. menulis jumlah += 1 padahal seharusnya jumlah.value += 1) — di <template> sebaliknya, .value JUSTRU tidak boleh ditulis karena Vue otomatis "membuka" ref di sana.