Ref dan Reactive Pada Reactivity Vue.js 3

ini adalah artikel lanjutan dari artikel sebelumnya, buat kamu yang belum tau artikel sebelumnya yaitu Reactivity Pada Vue.js 3, pada artikel tersebut saya hanya memberikan contoh bagaimana menggunakan fungsi reactive untuk membuat state yang reactive. Namun, Vue.js 3 juga menyediakan fitur lain yang berguna dalam pengelolaan state, yaitu ref.

Pada artikel ini yang akan kita bahas adalah perbedaan antara ref dan reactive dan kapan kita menggunakan salah satu dari keduanya tersebut, tentu dengan contoh kodenya, karena kedua fungsi tersebut dapat kita gunakan untuk membuat reactivity pada Vue.js.

Ref dan reactive adalah dua konsep yang berbeda dalam reactivity Vue.js 3. Pada dasarnya, ref digunakan untuk membuat referensi ke tipe data primitif, sedangkan reactive digunakan untuk membuat referensi ke tipe data object. bahkan kita bisa menyimpan ref pada data reactive Ref memberikan cara yang lebih eksplisit untuk mengakses dan memperbarui nilai, sementara reactive lebih cocok untuk mengelola state yang kompleks.

berikut adalah contoh kode nya :

import { ref } from 'vue';

const count = ref(0);

Dalam contoh ini, kita menggunakan ref untuk membuat referensi ke nilai 0. Dalam hal ini, count akan menjadi objek yang memiliki properti value yang berisi nilai dengan tipe data integer yaitu 0.

Ref sangat berguna saat digunakan dalam komponen Vue.js 3. Misalnya, dalam komponen sederhana berikut, kita menggunakan ref untuk melacak dan memperbarui nilai count:

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

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

Dalam contoh ini, kita menggunakan ref untuk membuat referensi count dengan nilai awal 0. Di dalam setup(), kita mendefinisikan fungsi increment yang akan menambah nilai count.value saat tombol ditekan. Pada tampilan, kita mengakses nilai count melalui count.value.

Perbedaan penting antara ref dan reactive adalah perilaku dalam pengaksesan dan pembaruan nilainya. Ketika menggunakan ref, kita harus menggunakan .value untuk mengakses atau memperbarui nilai referensi. Misalnya, count.value akan mengakses nilai aktual. Di sisi lain, saat menggunakan reactive, kita dapat mengakses dan memperbarui nilai langsung dari objek. Misalnya, state.count akan mengakses dan memperbarui nilai count dalam objek state.

Dari penjelasan di atas kita dapat menyimpulkan bahwa kita dapat menggunakan ref untuk menyimpan tipe data primitif seperti (string, boolean, number) sedangkan untuk menyimpan sebuah object kita harus menggunakan fungsi reactive