Vue Framework'ında Reactive Olma

data içindeki herhangi bir verinin değişmesi, bu verilerin sayfadaki görüntüsünün anında değişmesine neden olur. Vue'un bu davranışına reactive olma denir.

Pratikte test edelim. Aşağıdaki özelliğe sahip olduğumuzu varsayalım:

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

Bu özelliğin değerini ekrana yazdıralım:

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

Üzerine tıklandığında özelliğimizi değiştirecek bir buton yapalım:

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

Şimdi butona tıklandığında çağrılacak ve özelliği değiştirecek metodu yazalım:

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

Tüm kodu bir araya getirir ve butona basarsanız - ekrandaki yazı reactive bir şekilde diğerine değişecektir.