[Vue.js][Ch3][컴포지션API] 반응형 데이터(반응성)

App.vue

<template>
  <div @click="increase">
    {{ count }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1;
    }
  }
}
</script>

상단 코드 내용을 vue.js의 컴포지션 API로 변경해보자.

컴포지션 API를 활용할 땐, 반응성을 갖기 위해서 vue.js에서 제공하는 ref 기능을 사용하여 초기값을 만들어준다.

 

App.vue

<template>
  <div @click="increase">
    {{ count }}             <!-- 템플릿에선 value 속성 안붙여도 됨 -->
  </div>
</template>

<script>
import { ref } from 'vue'   // 2. 반응성을 가지도록 vue.js에서 제공하는 ref 사용

export default {
  setup() {                 // 1. setup 메소드를 통해 컴포지션 API 활용
    let count = ref(0);     // 3. ref 함수의 인수로 초기화할 값 지정 -> count에 반응성을 가지는 객체 데이터 반환
    function increase() {
      count.value += 1;     // 4. value 속성을 통해 데이터처럼 숫자 증가시킴
    }

    return {
      count,                // 5. 반응성을 가지는 count 반환
      increase
    }
  }
}
</script>

1. setup 메소드를 통해 컴포지션 API 활용
2. 반응성을 가지도록 vue.js에서 제공하는 ref 사용 (import ref)
3. ref 함수의 인수로 초기화할 값 지정 -> 변수에 반응성을 가지는 객체 데이터 반환
4. value 속성을 통해 데이터처럼 초기화한 값 사용
5. 반응성을 가지는 변수, 함수 반환

출력