• Apa Itu Reactive State?
• State dengan ref()
• State dengan reactive()
• Reactive Array
• Perbedaan ref() vs reactive()
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Props, bagaimana cara mengirim data dari parent ke child component.

Pada artikel kali ini, kita akan membahas tentang Reactive State di Vue, yaitu bagaimana menyimpan data di dalam komponen dan membuatnya otomatis diperbarui ketika nilainya berubah.

Apa Itu Reactive State?

State adalah data internal yang disimpan di dalam sebuah komponen. Di Vue, state bisa dibuat dengan dua cara utama menggunakan Composition API:

1. ref() → digunakan untuk menyimpan nilai primitif (string, number, boolean).
2. reactive() → digunakan untuk menyimpan object atau array yang lebih kompleks.

Ketika nilai state berubah, tampilan (template) otomatis ikut diperbarui.

State dengan ref()

ref() digunakan untuk membuat data yang bisa berubah (reactive) untuk tipe sederhana.

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

const count = ref(0)

const increment = () => {
  count.value++
}
</script>

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Tambah</button>
  </div>
</template>

Penjelasan:

• ref(0) membuat state dengan nilai awal 0.
• Nilai state diakses dengan .value di script, tapi di template cukup {{ count }}.
• Saat tombol diklik, state berubah, dan tampilan ikut update otomatis.

State dengan reactive()

reactive() digunakan untuk membuat object atau array yang reaktif.

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

const user = reactive({
  name: "Budi",
  age: 20
})

const tambahUmur = () => {
  user.age++
}
</script>

<template>
  <div>
    <p>Nama: {{ user.name }}</p>
    <p>Umur: {{ user.age }}</p>
    <button @click="tambahUmur">Tambah Umur</button>
  </div>
</template>

Penjelasan:

• reactive() membuat object user yang reaktif.
• Saat properti user.age berubah, tampilan ikut berubah.
• Tidak perlu .value karena reactive langsung bisa dipakai di template.

Reactive Array

Kita juga bisa menggunakan reactive() untuk array.

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

const todos = reactive(["Belajar Vue", "Belajar React"])

const addTodo = () => {
  todos.push("Belajar Pinia")
}
</script>

<template>
  <div>
    <h3>Daftar Todo:</h3>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
    </ul>
    <button @click="addTodo">Tambah Todo</button>
  </div>
</template>

Penjelasan:

• Array diubah menjadi reactive dengan reactive([]).
• Saat kita menambahkan item baru, tampilan langsung update.

Perbedaan ref() vs reactive()

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Reactive State di Vue. Kita mengenal ref() untuk data sederhana, reactive() untuk object/array, serta melihat bagaimana Vue secara otomatis memperbarui tampilan ketika state berubah.

Di artikel berikutnya, kita akan membahas tentang Event Handling, yaitu bagaimana menangani interaksi pengguna seperti klik, input, dan submit di Vue.

Terima kasih