Hallo gimana kabarnya ? mudah-mudahan sehat-sehat terus ya.. Pada kali ini saya ingin membahas antara perbedaan Ref dan Reactive pada composition API Vue 3. Sebelum lanjut, mungkin kita perlu tau kegunaan Ref dan Reactive ya..

Ref dan Reactive adalah cara untuk mendeklarasikan suatu state atau data yang nantinya bisa kita buat dinamis isinya. Dengan state ini kita tidak perlu merefresh browser untuk merubah suatu data.

Penggunaan Ref dan Reactive mempunyai beberapa perbedaan antaranya :

Akses data

Ref hanya bisa menampung data dengan tipe data primitif seperti Integer, String. Sedangkan Reactive hanya bisa menampung data object.

Dan untuk mengakses data, Ref harus menggunakan value, sedangkan Reactive cukup menggunakan key objectnya saja.

<script setup lang="ts">
  import {ref, reactive} from 'vue'

  var refData = ref({
    nama : 'Budi',
    nilai : 90 
  })

  var reactiveData = reactive({
    nama : 'Ani',
    nilai : 95
  })

  console.log(refData.value.nama)
  console.log(reactiveData.nama)

</script>

<template>
</template>

Hasilnya :

Budi

Ani

Merubah Data

Pada Ref untuk melakukan perubahan data harus pervalue, sedangkan Reactive bisa menggunakan array object.

<script setup lang="ts">
  import {ref, reactive} from 'vue'

  var refData = ref({
    nama : 'Budi',
    nilai : 90 
  })

  var reactiveData = reactive({
    nama : 'Ani',
    nilai : 95
  })

  refData.value.nama = 'Bambang'

  reactiveData = {
    nama : 'Nani',
    nilai : 90
  }

  console.log(refData.value.nama)
  console.log(reactiveData.nama)

</script>

<template>
</template>

Hasilnya :

Bambang

Nani

Akses Data Ke Template

Pada Ref untuk mengkases data ke template cukup memanggil variabelnya saja, sedangkan Reactive harus memanggil object keynya dahulu.

<script setup lang="ts">
  import {ref, reactive} from 'vue'

  var nama = ref('Budi')
  var nilai = ref(90)

  var reactiveData = reactive({
    nama : 'Ani',
    nilai : 95
  })

</script>

<template>
    <table>
      <tr>
        <td width="200px">#Ref</td>
        <td width="200px">#Reactive</td>
      </tr>
      <tr>
        <td>
          Nama : {{ nama }} <br>
          Nilai : {{ nilai }}
        </td>
        <td>
          Nama : {{ reactiveData.nama }} <br>
          Nilai : {{ reactiveData.nilai }}
        </td>
      </tr>
    </table>
</template>

Hasilnya :

Nah kalau disimpulkan kegunaan Ref lebih cocok untuk data yang bukan array, dan Reactive lebih cocok untuk data array.

Mungkin itu dulu ya.. kalau ada koreksi dari temen-temen silahkan dikomen aja, soalnya saya juga masih belajar