Reatividade no framework Vue

Qualquer alteração nos dados de data resulta em uma alteração instantânea na exibição desses dados na página. Esse comportamento do Vue é chamado de reatividade.

Vamos testar na prática. Suponha que temos a seguinte propriedade:

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

Vamos exibir o valor desta propriedade:

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

Vamos criar um botão que, ao ser clicado, alterará nossa propriedade:

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

Agora vamos escrever um método que será chamado ao clicar no botão e alterará a propriedade:

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

Se juntarmos todo o código e clicarmos no botão - o texto na tela mudará reativamente para o outro.