Vue.js - Composition API

Composition API란?

• 컴포넌트 로직을 유연하게 구성할 수 있는 API 모음
• Vue 3 버전에 추가될 기능
• setup 함수에 데이터가 구룹핑이 되어 데이터의 흐름을 파악하고 유지보수가 용이해짐
• 함수를 재사용하기가 용이해짐
• 필수가 아닌 옵션으로 vue 2에서 사용하는 옵션 그대로 사용해도 됨

 

Composition API 설치

• vue 2에서 사용하려면 설치가 필요 (3으로 업데이트 되면 내장될 예정)
• 터미널 → npm install @vue/composition-api
• import 하기
  

  <script>
    import Vue from 'vue' // Vue 객체를 사용하기 위한 임포트
    import VueCompositionApi from '@vue/composition-api' // Composition API를 사용하기 위한 임포트
    import { ref, reactive } from '@vue/composition-api' // Composition API 함수를 사용하기 위한 임포트
  
    Vue.use(VueCompositionApi) // Composition API 사용
  </script>

 

변수 및 함수 선언

• setup() 안에 변수, 함수를 선언하고 return 해주면 됨
• ref
  • 모든 원시타입(Primitve) 값을 포함한 여러가지 타입의 값을 받아 생성
  • setup() 함수안에서 값을 사용해야할 경우 value 속성으로 접근해야함
• reactive
  • 객체 타입만 받아 생성
  • 원본 객체와 동일하게 이용
  • 깊은(Deep) 감지 수행 (객체가 중첩된 상황에서도 반응형 데이터를 쉽게 조작하고 처리 가능)
  • toRefs 함수를 이용해 객체 데이터를 분할해서 사용 가능

<script>
  export default {
    setup() {
      const person1 = ref({ name: "kim", age: 29 });
      const person2 = reactive({ name: "park", age: 26 });

      const handleClick = () => {
        // ref로 감싼 값을 변경할 때는 value로 한번 들어가주고 값을 바꿉니다.
        person1.value.age = 30;

        // reactive는 바로 값을 바꿉니다.
        person2.age = 30;
      };

    
      return { 
        person1, // template에서는 person1.age로 사용합니다
        person2, 
        ...toRefs(person2), // template에서는 name, age를 이용함
        handleClick
      };
    }
  }
</script>

 

생명 주기 훅 (Life Cycle Hooks)

• Vue 2에서 사용하는 생명 주기 훅 이름 앞에 on 수식어로 붙여 메소드로 사용
  • beforeCreate -> setup
  • created -> setup
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

<script>
  // 기능 별로 나눠서 실행 가능
  const something1 = () => {
    onMounted(() => {
      // 실행 코드
    });
  }
  
  export default {
    setup() {
        something1();
        
        onMounted(() => {
          // 실행 코드
        });
        
        onUpdated(() => {
          // 실행 코드
        });
      };
    }
  }
</script>

 

참고 링크 1: https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/#utils-%E1%84%92%E1%85%A1%E1%86%B7%E1%84%89%E1%85%AE-%E1%84%8C%E1%85%A2%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC-composable

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

참고 링크 2: https://geundung.dev/102

[Vue 3] Composition API 살펴보기

참고 링크 3: https://velog.io/@ausg/Vue2-%EC%93%B0%EC%84%B8%EC%9A%94-Composition-API-%ED%95%9C%EB%B2%88-%EB%93%9C%EC%85%94%EB%B3%B4%EC%84%B8%EC%9A%94

Vue2 쓰세요? Composition API 한번 드셔보세요🙇‍♀️