컴포지션 API - 반응형 데이터 (반응성)

 

예제

 

App.vue

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

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

 

코드 이해하기

<h1 @click="increase"> {{ count }} </h1>

- 화면에는 count 값 출력, count 초기 값은 0

- count 값을 클릭하면 increase() 메소드 동작

- increase() 메소드는 count 값을 1씩 증가

- count 값이 변하면 화면에 count 값이 변경됨 

 

데이터를 변경하면 화면이 바뀐다 (반응성)

 

컴포지션 API 리팩토링

 

App.vue

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    let count = ref(0)
    function increase() {
      count.value += 1
    }

    return {
      count,
      increase
    }
  }
}
</script>

 

코드 이해하기

- setup() 메소드를 사용해서 컴포지션 API를 사용

- 컴포지션 API 를 활용할때는 반응성을 가지도록 해주기 위해서 ref 라는 기능을 사용, 객체 데이터를 반환한다

- 객체 데이터를 반환 하기 때문에 객체 데이터 내부에 있는 value 라는 속성으로 접근

- 사용하지 않으면 count 값을 클릭해도, count 값은 증가하지만 화면이 변경되지는 않는다