Reactivity pada Vue.js 3

Reactivity atau keaktifan adalah fitur penting dalam Vue.js yang memungkinkan pengembang untuk menciptakan antarmuka pengguna yang dinamis dan responsif. Dalam Vue.js 3, fitur reactivity telah ditingkatkan dengan penggunaan Proxy API JavaScript yang efisien. Artikel ini akan menjelaskan konsep reactivity dalam Vue.js 3 dan memberikan contoh kode untuk memahami penggunaannya.

Konsep Dasar Reactivity: Reactivity adalah kemampuan Vue.js untuk mendeteksi perubahan pada data dan secara otomatis memperbarui tampilan yang terkait. Dalam Vue.js 3, reactivity diimplementasikan dengan menggunakan Proxy API. Proxy adalah objek yang mengelilingi objek target dan memungkinkan kita untuk “memperhatikan” setiap akses dan perubahan pada objek tersebut. Dengan menggunakan Proxy, Vue.js dapat mengikuti perubahan pada objek dan memicu pembaruan pada tampilan yang terkait secara otomatis.

Membuat Reactive State: Pertama, kita perlu membuat objek reactive state menggunakan fungsi reactive yang disediakan oleh Vue.js 3. Misalkan kita ingin membuat state dengan properti count. Berikut adalah contoh kodenya :

import { reactive } from 'vue';

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

Dalam contoh ini, kita menggunakan fungsi reactive untuk membuat objek state yang memiliki properti count dengan nilai awal 0.

Selanjutnya, kita dapat menggunakan state yang reactive dalam komponen Vue.js 3. Misalkan kita memiliki komponen sederhana yang menampilkan nilai count pada tampilan. Berikut adalah contoh kode komponen:

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

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

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

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

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

Dalam contoh ini, kita menggunakan fungsi reactive untuk membuat objek state yang reactive. Di dalam setup(), kita juga mendefinisikan fungsi increment yang akan menambah nilai count saat tombol ditekan. Pada tampilan, kita menggunakan mustache syntax ({{ }}) untuk menampilkan nilai count, dan menggunakan event handler @click untuk memanggil fungsi increment.