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

각각의 기능별로 동작 기능들을 묶어서 관리 할 수 있다.

 

예시

 

기존방법 (script 코드)

 data() {
   return {
     count: 0
   }
 },
 methods: {
   increase() {
     this.count += 1
   }  
 },

 

컴포넌트 API를 이용한 코드(script)

 

반응형 데이터를 이용하기 위해서는 vue패키지의 ref 기능을 가져와서 사용해야한다

또한 setup이라는 메소드를 이용한다.

// 컴포지션 API 
  setup() {
    // ref 를 이용해서 초기값을 설정한다.
    let count = ref(0)
    function increase() {
      count.value += 1
    }
    
    return {
      count,
      increase
    }
  }

 

예제 전체 코드(App.vue)

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

<script lang="ts">
// 반응성 기능을 가져오기 위해 패키지 import
import {ref} from 'vue'

export default {
  // 기존에 사용방법
  // data() {
  //   return {
  //     count: 0
  //   }
  // },
  // methods: {
  //   increase() {
  //     this.count += 1
  //   }  
  // },
// 컴포지션 API 
  setup() {
    // ref 를 이용해서 초기값을 설정한다.
    let count = ref(0)
    function increase() {
      count.value += 1
    }
    
    return {
      count,
      increase
    }
  }
}
</script>

 

브라우저 확인