Mengenal Perbedaan Ref dan Reactive pada Vue 3

Ref dan Reactive adalah Reactivity API yang dikenalkan Vue 3 melalui Composition API. Keduanya adalah data yang bisa dikelola secara life(reactive) sehingga interaksi pengguna dengan data yang dikelolanya bisa lebih hidup.

Mengenal Composition API

Composition API adalah fitur baru dalam Vue 3 yang memungkinkan pengembang untuk menulis logika komponen dalam bentuk fungsi terpisah, yang dapat digunakan kembali dan dikomposisikan bersama-sama untuk membentuk logika yang lebih kompleks. Dengan menggunakan Composition API, pengembang dapat memecah logika komponen menjadi fungsi-fungsi yang lebih kecil dan lebih mudah dikelola, memisahkan konsern, dan meningkatkan reusabilitas kode.

Composition API memungkinkan pengembang untuk menulis fungsi yang menerima dan mengembalikan nilai reactive, sehingga memungkinkan pengembangan aplikasi yang lebih responsif dan mudah di-debug. Selain itu, Composition API juga menyediakan berbagai utilitas untuk manajemen state, lifecycle hooks, dan event handling yang lebih mudah dan intuitif.

Salah satu kelebihan Composition API adalah kemampuannya untuk mengatasi masalah kompleksitas dan skala dalam pengembangan aplikasi web yang besar. Dengan menggunakan Composition API, pengembang dapat memecah logika yang kompleks menjadi beberapa fungsi kecil dan mengelompokkannya bersama-sama dalam cara yang logis dan mudah di-maintain.

Mengenal Data Ref

“Ref” digunakan untuk mengubah nilai dari suatu variabel secara langsung. Data yang bisa digunakan pada ref adalah hanya data primitif saja. Apa saja jenis data primitif bisa dibaca pada artikel sebelumnya yang membahas mengenai jenis-jenis data pada pemrograman.

Misalnya, jika ingin mengubah nilai variabel “count” ketika suatu event terjadi, kita bisa menggunakan “ref” seperti ini:

import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

Satu hal yang perlu diingat adalah ketika menggunakan “ref”, kita harus selalu mengakses nilai variabel dengan cara menambahkan “.value” di akhir variabel. Seperti contoh di atas adalah: count.value

Mengenal Data Reactive

“Reactive” digunakan untuk membuat suatu object menjadi reactive secara keseluruhan, artinya semua properti di dalam object akan merespon perubahan. Data yang bisa digunakan pada Reactive bisa berupa data kompleks maupun data primitif. Ini berguna ketika kita ingin mengamati beberapa properti sekaligus, misalnya:

import { reactive } from 'vue'

const field = reactive({
  name: "Ahmad budairi",
  email: "[email protected]",
  active: true,
  dor: new Date()
})

Data reactive di atas bisa digunakan pada v-model secara langsung atau digunakan untuk kebutuhan lain yang memerlukan perubahan data dua arah secara langsung (reaktif). Contoh penggunannya pada v-model adalah sebagai berikut:

<template>
  <v-textfield label='Name' v-model='field.name'/>
  <v-textfield label='Email' v-model='field.email'/>
  <v-checkbox label="Status" v-model='field.active'></v-checkbox>
</template>

Contoh penggunaan v-model di atas menggunakan komponen Vuetify. Kamu bisa menggunakan komponen lain menyesuaikan dengan kebutuhan.