컴포지션 API

 

예제

 

App.vue

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

<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

 

코드 이해하기

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

- 해당 h1 태그를 클릭하면 increase() 메소드 동작

- count 횟수를 +1 증가

- count 에 변화가 생겼으므로 doubleCount 동작

- doubleCount 는 count * 2 증가

 

<h1> {{ message }} / {{ reversedMessage }} </h1>

- {{ message }} 는 message: 'Hello world!' 를 출력

- reversedMessage() 는 해당 message 를 반전시켜줌

 

특정한 부분을 해석하기 위해서 많은 노력이 필요

vue.js 에서 제공하는 컴포지션API 를 사용하면 해석하기 좋은 형태로 만들어 줄 수 있다

 

컴포지션 API 리팩토링

 

App.vue

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

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const message = ref('Hello World')
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    function increase() {
      count.value += 1
    }

    return {
      message,
      reversedMessage,
      count,
      doubleCount,
      increase
    }
  }
}
</script>

 

컴포지션 API를 통해서 깔끔하게 정리를 할 수 있다

 

---

참고

https://v3.ko.vuejs.org/guide/composition-api-introduction.html

소개 | Vue.js