Composition API란?

Component의 로직을 유연하게 구성할 수 있도록 하는 함수 기반의 API 

*자세한 설명 생략

 

 

▷ Composition API란?

 

    - Vue Component를 구성하는 데 사용

 

    - Vue3에서 새로 추가된 함수 기반의 API

      *Vue3에 내장

 

    - Options API의 단점을 보완하기 위해 등장

      *Vue3에서는 Composition API 권장

 

    - 로직을 유연하게 구성할 수 있어 재사용성과 가독성을 높임

 

 

▷ VS Options API

 

    - Options API는 정해진 구조로 인해 복잡한 코드의 품질이 떨어짐

      *코드의 재사용이 어려움

      *로직의 파악이 어려움

      *유지보수가 어려움

 

 

▷ Options API

 

- Vue Component를 구성하는 데 사용되는 객체 기반의 API

 

- Component의 속성, 메소드, 라이프사이클 훅 등을 객체 리터럴 형태로 정의

 

- 정해진 구조(data, methods, computed)로 코드를 작성

 

 

▷ Composition API 기본 속성

*Options API의 속성과 중복될 수 있음

 

    - setup()

 

        -- Composition API를 구현

 

        -- 로직과 데이터를 통합 관리

 

    - data()

 

        -- 객체 혹은 함수의 형태로 vue 인스턴스가 사용할 정보를 가지고 있는 속성

 

        -- template 에서 {{ }} 을 통해 접근 가능

 

        -- 데이터를 ref(), reactive()로 감싸면 반응형 데이터로 변경

          *반응형 데이터 : 원할때마다 원하는 값으로 변경

 

            --- reactive() : 객체만 사용 가능

 

            --- ref() : 어떤 타입에서도 사용 가능

 

    - computed()

 

        -- template의 데이터 표현을 간결하게 도와주는 속성(가독성, 재사용성)

 

        -- data() 값이 변했을 때만 자동으로 다시 연산하고 결과 값 저장(캐싱)

 

        -- 기본적으로 Getter를 제공하고 필요에 따라 Setter를 설정해서 사용

 

        -- 파라미터를 받지 않음

 

     - Props()

 

        -- parent component에서 child components로 데이터를 전달(단방향)

 

 

▷ 참고

백엔드가 정리하는 Vue3 - Composition API

[Vue] Composition API 사용 방법

Option API vs. Composition API

[Vue] Composition API

Option API와 Composition API

[Vue.js] Composition API란? (vs Options API)

[Vue] Composition API

Vue3 - 1. Composition API

[Vue.js] Data 와 Method

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

[Vue] Computed vs Watch vs Method 사용법 및 비교

[Vue.js] Vue3에서 ref와 reactive 사용법과 차이점

 

 

▷ 관련 글

Vue3 기초 예제 프로젝트 정리