[VUE] composition api 배경.

우선적으로 알아두실 사항은 composition api은 옵션이라는 것입니다. 기존 vue2에서 사용하는 옵션 api를 사용하셔도 되고, 본인의 취향, 각 api의 장단점을 비교하여 composition api를 사용하여도 됩니다.

 

공식 홈페이지에서는 options api, composition api 사용을 아래와 같이 건고하고 있다.

 

Vue를 처음 사용하는 경우 일반적인 권장 사항은 다음과 같습니다.

• 학습 목적으로 이해하기 쉬운 스타일을 사용하십시오. 다시 말하지만 대부분의 핵심 개념은 두 스타일 간에 공유됩니다. 나중에 언제든지 다른 스타일을 선택할 수 있습니다.
• 생산용:
  • 빌드 도구를 사용하지 않거나 점진적 향상과 같이 복잡도가 낮은 시나리오에서 주로 Vue를 사용할 계획이라면 옵션 API를 사용하세요.
  • Vue로 완전한 애플리케이션을 구축할 계획이라면 Composition API + Single-File Components로 이동하십시오.

CODE를 통해 해당 API 스타일 차이를 확인해 보자.

 

[options api]

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

[composition api]

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

무엇을 선택해야 할까요?

두 API 스타일 모두 일반적인 사용 사례를 완벽하게 다룰 수 있습니다. 그것들은 완전히 동일한 기본 시스템에 의해 구동되는 서로 다른 인터페이스입니다. 실제로 Options API는 Composition API 위에 구현됩니다! Vue에 대한 기본 개념과 지식은 두 스타일에서 공유됩니다.

this옵션 API 는 일반적으로 OOP 언어 배경에서 오는 사용자를 위한 클래스 기반 정신 모델에 더 잘 맞는 "구성 요소 인스턴스"(예제에서 볼 수 있음) 개념을 중심으로 합니다 . 또한 반응성 세부 사항을 추상화하고 옵션 그룹을 통해 코드 구성을 시행하여 초보자에게 더 친숙합니다.

Composition API는 함수 범위에서 직접 반응 상태 변수를 선언하고 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성하는 데 중점을 둡니다. 보다 자유로운 형식이며 효과적으로 사용하려면 Vue에서 반응성이 어떻게 작동하는지 이해해야 합니다. 그 대가로 그 유연성은 논리를 구성하고 재사용하기 위한 보다 강력한 패턴을 가능하게 합니다.

 

https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/#composition-api%E1%84%80%E1%85%A1-%E1%84%82%E1%85%A1%E1%84%8B%E1%85%A9%E1%84%80%E1%85%A6-%E1%84%83%E1%85%AC%E1%86%AB-%E1%84%87%E1%85%A2%E1%84%80%E1%85%A7%E1%86%BC

vue3 composition api 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable

 

https://vuejs.org/guide/introduction.html#api-styles

Introduction | Vue.js