[vue3] composition api

컴포지션 API

기존에 배운 내용대로 코드를 짜게된다면
다른 로직이 서로 섞여있어서 읽기쉬운 코드가 아니다. 

컴포지션 API를 사용하므로써
같은 로직은 한데 모아서 처리할수있게된다

 

 

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


<script>
import { ref } from 'vue' 

export default {
  // data(){
  //   return{
  //     count: 0
  //   }
  // },
  // methods:{
  //   increase(){
  //     this.count+=1
  //   }
  // },
  setup(){
    let count = ref(0)
      //그냥 0으로 초기화하면 반응성이 없다!
    function increase(){
      count.value += 1
      //ref를 사용함과 동시에 value 를 추가
    }
    
    return{
      count,
      increase
    }
  }
  
}
</script>