vue 3 reaktivitas

📘 Artikel 5 dari 16 · Seri Belajar Vue

Reaktivitas di Vue 3 —
Paham ref dan reactive
Supaya Data Bisa Berubah Otomatis di Layar

Kamu nulis data di JavaScript, tapi UI-nya diam saja? Ini saatnya kamu kenalan dengan sistem reaktivitas Vue 3 — fitur paling ajaib yang bikin Vue beda dari framework lain.

#BelajarVue #VueFrontEnd #RefReactiveVue3 #ReactivitasVue3

⏱️

Estimasi Baca

10–12 Menit

🎯

Level

Pemula

📅

Tahun

2026

🚀

Framework

Vue 3 + Composition API

Pernah nggak kamu nulis variabel di JavaScript, nilainya berubah, tapi tampilan di browser tetap anteng nggak bergerak sama sekali? Itulah masalah klasik yang bikin pemula frustrasi. Nah, di sinilah reaktivitas Vue 3 masuk sebagai penyelamat. Dengan memahami ref dan reactive Vue 3, kamu bisa bikin data yang berubah di kode otomatis memperbarui tampilan di layar — tanpa reload, tanpa manipulasi DOM manual, dan tanpa sakit kepala. Di artikel ke-5 dari seri Vue from Zero to Zorro ini, kita akan bedah tuntas dua senjata utama reaktivitas Vue 3: ref() dan reactive().

🧠 Apa Itu Reaktivitas Vue 3 dan Kenapa Ini Penting Banget?

Bayangkan kamu punya papan tulis di kelas. Setiap kali guru nulis angka baru, murid-murid langsung otomatis tahu nilainya berubah — nggak perlu guru bilang "hei, lihat nih ya, angkanya berubah!" Itulah analogi dari reaktivitas Vue 3.

Dalam dunia pemrograman, reaktivitas artinya: ketika data berubah, UI langsung ikut berubah secara otomatis. Vue 3 menggunakan sistem reaktivitas berbasis Proxy dari JavaScript modern, yang jauh lebih canggih dibanding Vue 2.

📌 Definisi Kunci

Reaktivitas = Data Berubah → UI Otomatis Update

Vue 3 melacak setiap variabel reaktif yang kamu buat. Kalau nilainya berubah, Vue otomatis re-render bagian template yang menggunakan variabel itu — hanya bagian itu, bukan seluruh halaman.

🔥 Fakta Menarik

Vue 3 menggunakan JavaScript Proxy (ES2015+) untuk reaktivitas — bukan Object.defineProperty() seperti Vue 2. Hasilnya? Reaktivitas yang lebih cepat, bisa mendeteksi penambahan/penghapusan property, dan mendukung array secara native!

Di Vue 3 dengan Composition API, ada dua cara utama membuat data reaktif:

1. ref() — untuk nilai tunggal (string, number, boolean, dll)
2. reactive() — untuk objek kompleks dan array

🔹 Mengenal ref() di Vue 3 — Si Kotak Ajaib Data Tunggal

Anggap ref() seperti kotak kaca transparan. Kamu taruh nilai di dalamnya, dan Vue bisa selalu "mengawasi" nilai tersebut. Kalau nilainya berubah, Vue langsung tahu dan update template.

Cara pakainya sederhana — import ref dari Vue, lalu bungkus nilai kamu:

1

Import ref dari Vue

Kamu harus import dulu sebelum bisa dipakai di setup() atau <script setup>.

2

Deklarasi variabel reaktif dengan ref(nilai)

Di dalam script, akses nilainya via .value. Di template, Vue otomatis unwrap — jadi nggak perlu .value!

3

Return variabel dari setup agar template bisa menggunakannya

Dengan <script setup>, kamu nggak perlu return manual — otomatis ter-expose!

Counter.vue

<!-- Template: langsung pakai nama variabel, tanpa .value -->
<template>
  <div>
    <p>Jumlah klik: {{ count }}</p>
    <button @click="tambah">Klik Aku!</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// ref() membuat variabel reaktif
const count = ref(0)

function tambah() {
  count.value++  // ← di script, wajib pakai .value
}
</script>
  

💡 Tips Penting

Di dalam <script setup>, kamu wajib pakai .value untuk mengakses atau mengubah nilai ref. Tapi di <template>, Vue otomatis "membuka" ref-nya — kamu cukup tulis nama variabelnya saja!

🔷 Mengenal reactive() di Vue 3 — Untuk Data yang Lebih Kompleks

Kalau ref() cocok untuk nilai tunggal, maka reactive() adalah pilihan terbaik untuk objek atau kumpulan data yang saling berhubungan. Analoginya: kalau ref() itu kotak kecil untuk satu barang, reactive() itu lemari dengan banyak laci — semua lacinya bisa dipantau sekaligus.

Keuntungan reactive(): kamu nggak perlu .value — cukup akses langsung propertynya seperti objek JavaScript biasa.

UserProfile.vue

<template>
  <div>
    <h2>{{ user.nama }}</h2>
    <p>Umur: {{ user.umur }}</p>
    <button @click="ulangTahun">🎂 Ulang Tahun!</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

// reactive() untuk objek — tanpa .value!
const user = reactive({
  nama: 'Budi',
  umur: 25,
  kota: 'Surabaya'
})

function ulangTahun() {
  user.umur++  // langsung akses property, tanpa .value
}
</script>
  

⚡ Insight Penting

reactive() hanya bisa menerima object, array, Map, atau Set. Jangan coba masukkan string, number, atau boolean — Vue akan melempar error. Untuk nilai primitif, tetap gunakan ref()!

⚖️ ref vs reactive Vue 3 — Kapan Pakai yang Mana?

Ini pertanyaan yang paling sering ditanyakan pemula. Jawabannya simpel: keduanya sama-sama valid, tapi ada konteks yang membuat salah satunya lebih cocok.

📊 Analisis Mendalam

🔹 ref()

• Cocok untuk nilai tunggal (string, number, boolean)
• Bisa juga untuk objek (tapi lebih verbose)
• Perlu .value di dalam script
• Auto-unwrap di template
• Lebih populer di komunitas Vue 3

🔷 reactive()

• Hanya untuk objek, array, Map, Set
• Tidak bisa untuk nilai primitif
• Akses langsung tanpa .value
• Cocok untuk state yang punya banyak field
• Lebih seperti Options API data()

Aspek	ref()	reactive()
Tipe Data	Semua tipe	Object / Array saja
Akses di Script	nama.value	nama.property
Akses di Template	{{ nama }}	{{ nama.property }}
Reaktif saat destructure?	✅ Tetap reaktif	❌ Hilang reaktivitas
Recommended untuk	State sederhana & primitif	Form state & data kompleks

⚠️ Perhatian!

Jangan destructure objek dari reactive() secara langsung! Contoh: const { nama } = user akan membuat nama kehilangan reaktivitasnya. Kalau perlu destructure, gunakan toRefs().

🛠️ Praktik Nyata: Gabungan ref dan reactive Vue 3 dalam Satu Komponen

Sekarang waktunya praktik! Mari kita buat komponen form sederhana yang menggabungkan keduanya — ref reactive Vue 3 — dalam satu file:

FormDaftar.vue

<template>
  <div>
    <!-- ref() untuk toggle loading -->
    <p v-if="isLoading">⏳ Mengirim data...</p>

    <!-- reactive() untuk form data -->
    <form @submit.prevent="kirimForm">
      <input v-model="form.nama" placeholder="Nama kamu" />
      <input v-model="form.email" placeholder="Email kamu" />
      <button type="submit">Daftar</button>
    </form>

    <!-- Preview data real-time -->
    <p>Halo, {{ form.nama }}! Kamu akan dihubungi di {{ form.email }}</p>
  </div>
</template>

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

// ref untuk nilai tunggal boolean
const isLoading = ref(false)

// reactive untuk objek form dengan banyak field
const form = reactive({
  nama: '',
  email: ''
})

async function kirimForm() {
  isLoading.value = true
  // Simulasi request API
  await new Promise(r => setTimeout(r, 2000))
  isLoading.value = false
  alert(`Berhasil mendaftar, ${form.nama}!`)
}
</script>
  

⚡ Insight: Pola Terbaik di Vue 3

Banyak developer Vue 3 berpengalaman memilih untuk selalu pakai ref() untuk semua state, termasuk objek. Ini karena konsistensi .value membuatnya lebih mudah di-refactor dan di-debug. Tim Vue sendiri merekomendasikan pendekatan ini di dokumentasi resmi.

✅ Kesimpulan

Kamu Sudah Paham Reaktivitas Vue 3!

Di artikel ini, kamu sudah mempelajari:

• 🧠 Konsep reaktivitas Vue 3 — bagaimana Vue melacak perubahan data dan memperbarui UI secara otomatis
• 🔹 ref() — untuk nilai tunggal, perlu .value di script tapi auto-unwrap di template
• 🔷 reactive() — untuk objek kompleks, akses langsung tanpa .value
• ⚖️ Kapan pakai yang mana — dan pitfall yang harus dihindari saat menggunakan ref reactive Vue 3

Sistem reaktivitas Vue 3 ini adalah fondasi dari semua yang akan kamu pelajari ke depannya — mulai dari computed, watch, sampai Pinia untuk state management global. Jadi pastikan kamu benar-benar paham konsep ini sebelum lanjut!

💬 Punya pertanyaan atau bingung di bagian mana? Drop komentar di bawah — kamu juga bisa share artikel ini ke teman yang lagi belajar Vue 3 biar makin banyak yang paham reaktivitas!

#BelajarVue #RefReactiveVue3 #ReactivitasVue3 #VueFrontEnd

📚

Seri Lengkap

Vue from Zero to Zorro

Artikel ini adalah bagian dari seri 16 Artikel Belajar Vue: Vue from Zero to Zorro — panduan lengkap belajar Vue 3 dari nol sampai bisa bikin aplikasi nyata. Cek daftar isi lengkapnya di sini:

🗂️ Lihat Semua 16 Artikel Seri Vue

🧭 Navigasi Artikel

← Sebelumnya · Artikel 4

Belajar Komponen Vue 3 — Single File Component, Template, Script, dan Style dalam Satu File

→ Baca Artikel Sebelumnya

Selanjutnya · Artikel 6 →

Template Syntax & Direktif — v-if, v-for, v-bind, v-model, dan v-on Explained dengan Contoh Nyata

→ Baca Artikel Selanjutnya

Artikel ini bagian dari seri Vue from Zero to Zorro · Ditulis dengan ❤️ untuk komunitas developer Indonesia