[VUE 3] Composition API 란?

새로 vue3를 시작하면서  낮선 단어들이 어렵게 느껴졌다. composition api 도 그 중 하나.

 

쉽게 풀자면..

vue를 하면서 코딩 스타일이 options 란 애랑 composition 이란 2가지가 있는데

vue2 에 했던 스타일이 options api ,

vue3 의 컨벤션이 composition api란 스타일이다.

 

 

Options API

export default {
  data() {   
    return { // 기존엔 data() return 안에 정의를 강제했었다...
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 계산된 값을 반환하는 속성
    publishedBooksMessage() {
      // `this`는 컴포넌트 인스턴스를 가리킵니다.
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

 

Composition API

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({   // 그냥 자바스크립트 처럼 깔끔하게 정의가 됬다
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 계산된 ref, 그리고 this로 접근 안해도 됨 @0@
//스코프가 미쳐 날뛰는 그 친구 찾는다고 로그 안찍어도 됨... ㅋ
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

컴포지션 API는 Vue.js 3에 도입된 함수들의 집합으로 개발자들이 보다

유연하고 반응적인 스타일의 코딩을 사용하여 Vue 구성 요소를 작성할 수 있게 한다.

 

Vue 구성 요소를 작성하는 전통적인 방법인 Options API의 대안이다.

(물론 options API를 vue3에서 사용 못하는 것은 아니나, 추천 하지는 않는다)

 

Comopsition API를 보면  논리적 문제를 해결하는 동안 더 이상 다른 옵션 블록 사이를 이동할 필요가 없다.

머리가 덜 복잡해지는 거다... ㅠㅠ

 

// setup() 함수의 사용 대신 테그 설정 해버렸다. 동작은 완벽히 setup 그대로 동작한다
// setup() 에서 각 속성명, 함수명을 return 으로 명시화 하지 않고
// templete 에서 직접 < {{속성명}} , {{함수명}} 으로 접근이 가능하다

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

// 반응형 상태, setup 안에서 
// const count = ref(0) 가 아닌
// const count = 0      으로 할당했다면
// 반응형으로 정의를 하지 않았기 때문에 
// 1, 2, 3 이렇게 증가하지 않고 0 으로만 머물러 있을 것이다.

const count = ref(0)

// 상태를 변경하고 업데이트를 트리거하는 함수
function increment() {
  count.value++
}

// 생명주기 훅
onMounted(() => {
  console.log(`숫자를 세기 위한 초기값은 ${count.value} 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

이 예에서는 count 변수와 doubleCount 변수가 반응형이며, 증분 함수를 사용하여 count 값을 업데이트할 수 있습니다. Composition API를 사용하면 구성요소에서 반응형 데이터와 계산된 속성을 쉽게 만들고 조작할 수 있을 뿐만 아니라

라이프사이클 후크와 메서드를 보다 표현적이고 직관적인 방법으로 관리할 수 있습니다.

 

 

출처 :  세상 친절하지만 불친절한 뷰3 공식 다큐

https://ko.vuejs.org/guide/introduction.html 

소개 | Vue.js