Reaktivitas dalam Framework Vue

Setiap perubahan data dari data menyebabkan perubahan instan pada tampilan data tersebut di halaman. Perilaku Vue seperti ini disebut reaktivitas.

Mari kita buktikan dalam praktik. Misalkan kita memiliki properti berikut:

javascriptdata() {
  return {
    text: 'xxx',
  }
}

Tampilkan nilai properti ini:

App.vue<template>
  {{ text }}
</template>

Buat tombol yang ketika ditekan akan mengubah properti kita:

App.vue<template>
  {{ text }}
  <button @click="change">text</button>
</template>

Sekarang tulis metode yang akan dipanggil saat tombol diklik dan mengubah properti:

App.vuemethods: {
  change: function() {
    this.text = 'yyy';
  }
}

Jika semua kode digabungkan dan tombol ditekan - teks di layar akan secara reaktif berubah menjadi teks lainnya.