Vue 프레임워크의 반응성

data의 데이터 변경은 해당 데이터의 페이지 표시를 즉시 변경시킵니다. Vue의 이러한 동작을 반응성이라고 부릅니다.

실제로 확인해 보겠습니다. 다음과 같은 속성이 있다고 가정합시다:

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

이 속성의 값을 출력해 봅시다:

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

클릭 시 속성이 변경되는 버튼을 만들어 봅시다:

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

이제 버튼 클릭 시 호출되어 속성을 변경할 메서드를 작성해 봅시다:

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

모든 코드를 합쳐서 버튼을 누르면 화면의 텍스트가 반응적으로 다른 텍스트로 변경됩니다.