Cerita Tentang Ref, ShallowRef, Reactive, dan Lainnya

Reactivity adalah salah satu fitur inti dalam Vue 3 yang memungkinkan data dalam aplikasi kita menjadi responsif dan interaktif. Di artikel ini, kita akan membahas lebih dalam tentang berbagai API reactivity yang tersedia di Vue 3, seperti ref(), shallowRef(), reactive(), dan lainnya. Kita juga akan mempelajari kapan harus menggunakan masing-masing API ini dan bagaimana menerapkannya dalam proyek-proyek Vue kita.

Ref

ref() adalah fungsi yang digunakan untuk membuat data primitif (string, number, boolean) atau objek/array sederhana menjadi reaktif. Cara penggunaannya cukup sederhana, bungkus nilai yang ingin dijadikan reaktif dengan ref(), dan nilai tersebut akan menjadi objek ref yang dapat dipantau perubahannya secara otomatis.

const count = ref(0);
console.log(count.value); // 0

count.value++;
console.log(count.value); // 1

Catatan: Jangan mencoba untuk mengubah referensi ref secara langsung, karena akan menghilangkan reaktivitasnya. Selalu akses atau ubah nilai ref melalui properti .value.

ShallowRef

shallowRef() mirip dengan ref(), namun hanya membuat nilai di tingkat paling atas menjadi reaktif. Nilai yang nested di dalam objek atau array tidak akan menjadi reaktif. Ini sangat berguna untuk mengoptimalkan performa ketika bekerja dengan struktur data yang besar dan kompleks.

const state = shallowRef({ count: 1 });

// Tidak akan memicu perubahan
state.value.count = 2;

// Akan memicu perubahan
state.value = { count: 2 };

Selain itu, Vue 3 juga menyediakan fungsi triggerRef() yang digunakan untuk memaksa pembaruan efek yang bergantung pada shallowRef(). Ini biasanya digunakan setelah melakukan mutasi yang dalam pada nilai di dalam shallowRef().

const shallow = shallowRef({
  greet: "Hello, world",
});

watchEffect(() => {
  console.log(shallow.value.greet);
});

// Tidak akan memicu efek
shallow.value.greet = "Hello, universe";

// Akan memicu efek dan log "Hello, universe"
triggerRef(shallow);

Reactive

reactive() digunakan untuk membuat objek menjadi reaktif. Berbeda dengan ref(), reactive() tidak memerlukan penggunaan .value untuk mengakses atau mengubah properti objek. Properti objek dapat diakses dan diubah secara langsung seperti objek biasa.

const state = reactive({
  count: 0,
  message: "Hello",
});

console.log(state.count); // 0
state.count++;
console.log(state.count); // 1

ShallowReactive

shallowReactive() mirip dengan reactive(), namun hanya membuat properti di tingkat paling atas menjadi reaktif. Objek atau array yang nested di dalam tidak akan terpengaruh.

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2,
  },
});

state.foo++; // Reaktif
state.nested.bar++; // Tidak reaktif

Perhatian: Gunakan shallowReactive() dengan hati-hati dan hanya untuk state di tingkat root dalam komponen. Hindari menyarangkan shallowReactive() di dalam objek reaktif yang dalam, karena dapat menyebabkan perilaku reaktivitas yang tidak konsisten dan sulit di-debug.

API Tambahan

Vue 3 juga menyediakan beberapa API tambahan untuk reactivity, seperti:

toRaw(): Digunakan untuk mengambil objek asli dari proxy yang dibuat oleh reactive(), readonly(), shallowReactive(), atau shallowReadonly().
markRaw(): Digunakan untuk menandai objek agar tidak pernah dikonversi menjadi proxy.
effectScope(): Digunakan untuk membuat objek efek scope yang dapat menangkap efek reaktif (computed dan watchers) yang dibuat di dalamnya, sehingga efek-efek ini dapat di-dispose secara bersamaan.

Kapan Menggunakan Apa?

Berikut adalah panduan sederhana untuk memilih API reactivity yang sesuai:

Gunakan ref() untuk data primitif (string, number, boolean) atau objek/array sederhana yang tidak kompleks.
Gunakan reactive() untuk objek yang lebih kompleks dengan banyak properti yang saling terkait.
Gunakan shallowRef() atau shallowReactive() dengan hati-hati untuk optimasi performa pada struktur data yang besar dan tidak berubah (immutable).
Gunakan API tambahan seperti toRaw(), markRaw(), dan effectScope() sesuai kebutuhan dan dengan pemahaman yang baik.

Hindari Abstraksi Komponen yang Tidak Perlu

Salah satu hal yang perlu diperhatikan dalam penggunaan reactivity di Vue 3 adalah menghindari abstraksi komponen yang tidak perlu. Instance komponen jauh lebih mahal daripada DOM node biasa, sehingga membuat terlalu banyak komponen hanya untuk abstraksi atau organisasi kode dapat berdampak negatif pada performa aplikasi.

Kesimpulan

Reactivity adalah fitur yang sangat kuat dalam Vue 3, dan memahami berbagai API reactivity yang tersedia sangat penting untuk mengembangkan aplikasi yang efisien dan performant. Dengan mengetahui kapan harus menggunakan ref(), shallowRef(), reactive(), atau API lainnya, kita dapat membuat aplikasi Vue yang responsif dan interaktif dengan mudah.

Jangan ragu untuk bereksperimen dengan API reactivity dalam proyek-proyek Vue Anda. Ingatlah untuk selalu mempertimbangkan performa aplikasi dan menghindari kompleksitas yang tidak perlu. Dengan pemahaman yang solid tentang reactivity di Vue 3, Kita akan menjadi pengembang Vue yang handal dan efektif.

Selamat belajar dan bersenang-senang.