[Vue] OptionsAPI vs CompositionAPI

Vue는 options API 와 composition API를 제공한다.
Vue3부터 composition API를 제공하기 시작하였고, 조금 더 논리적이고 구조화된 방식을 구현할 수 있어서 좋다.
장점으로는, 강제되는 옵션이 최소화되어 있다는 것과, TS와의 호환이 좋다는 것!

반응형 데이터와 타입스크립트 설정

CompositionAPI의 경우, setup() 속성 내부에서 ref 를 사용하여 데이터를 만들 수 있다.
이때 setup을 < script > 의 속성으로 사용하여 더 간결하게 사용할 수 있다.

타입스크립트로 script 작성하려면 lang="ts" 속성을 설정하면된다. (OptionsAPI에서도 동일)
추가적으로, OptionsAPI에선 내보내는 객체를 defineComponent()로 감싸야하지만, setup 속성을 사용한 Composition에서는 생략 가능하다.

<script setup lang="ts">

ref

위 코드에서 보이듯, import { ref } from 'vue' 로 가져온 ref를 사용하여 데이터를 만든다.

이때 ref로 만든 데이터는 값이 아니라 참조객체이다. 값을 얻기 위해선 .value 속성으로 접근 해야한다!

단, script 영역에서만 해당된다. template 영역에선 바로 접근 가능

reactive

ref로 생성한 데이터는 “참조”형이기 때문에 값으로 접근하기 위해 .value 를 사용했다.

이 번거로움을 해결하기 위해 reactive로 생성할 수 있다.

import { reactive } from 'vue';

하지만, reactivefh 만들 수 있는 반응형 데이터는, 값이 무조건 “참조형 데이터” 이어야 함!! ex)객체, 배열
문자, 숫자, 불린 같은 원시형엔 불가능 !!!!!!!!!

ref: 원시형, 참조형 다 가능. 단, .value로 값 접근 (( 권장 ))
reactive : 참조형에 한해서 가능. 원시형엔 아예 불가능 .value 생략 가능. watch에도 deep옵션 생략 가능.

메소드

CompositionAPI에서는 OptionsAPI의 methods 속성을 사용하지 않는다. 기본 함수로서 메소드를 표현한다.
함수 선언시 일반 함수와 화살표 함수 모두 가능하다.

라이프사이클

• created
  created 생명주기의 경우, CompositionAPI에서는 script영역에 기본 함수로 적어주는 것으로 해당된다.

• mounted 등
  onMounted, onUpdated, onUnmounted의 경우 ‘vue’ 패키지로부터 import 해야한다.

import { onMounted } from 'vue'

computed와 watch

계산된 데이터 computed와 데이터 감시 watch 또한, CompositonAPI에서는 import 해와야 한다.

import { computed, watch } from 'vue';

• computed로 계산된 데이터에 대한 접근은 기본적으로 getter이다. 데이터 값 변경을 위해서 setter를 만들어줘야하고, 이는 computed 인자에 객체로 get(), set() 으로 만들 수 있다.

• computed 데이터 역시 “참조객체”이다. 따라서 .value로 접근해야한다.

• watch( 감시할 데이터 , 변경로직 콜백)
  변경로직 콜백은 (이전값, 새값) ⇒ { } 로 이루어진다.
  watch로 데이터를 감시할 때, 객체형 데이터에 대해서 내부 속성에 대해서까지 감시하려면 세번째 인자로 deep 속성을 주어야 한다.

  watch(user, (newVal) => console.log(newVal), { deep: true });

  특정 속성에 대한 감시는 다음과 같다.

  watch(
    **() => user.value.name**, // value 로 접근 유의!
    (newVal) => console.log(newVal),
  );

component

defineProps

OptionsAPI 에서의 props 옵션을 선언할 땐 defineProps() 사용.
import 할 필요 없이 < script setup > 내에서만 사용할 수 있는 컴파일러 매크로이다.

++ 기본 값 지정
defineProps만 사용하면, 기본 값을 같이 제공하기 어렵다. 그래서 withDefaults로 감싼다.
withDefaults( 기존 defineProps 선언 , { 디폴트값 } )

defineProps<{
  modelValue: string;
  name?: string;
  active?: boolean;
}>();

->

withDefaults(
  defineProps<{
    modelValue: string;
    name?: string;
    active?: boolean;
  }>(),
  {
    name: '',
    active: false,
  },
);

OptionsAPI에선 this.$props.프롭스명 으로 접근할 수 있었지만, props에는 (withDefaults로 감싼)defineProps의 반환값을 받아야 한다.
props로 받았다면 이후에 props.프롭스명 으로 접근

defineEmits

emit 옵션을 선언할 땐 defineEmits 를 사용한다.

defineEmits의 경우, emits 옵션에서의 값과 동일하게 인자로 가지게 되고, 이 반환값을 emit으로 받아야 한다. 주로 $를 붙이지 않는다!

emit을 실행시, Options에선 this.$emit으로 접근했지만, Composition에선 바로 emit() 으로 접근한다!

update 예약어인 경우, 위 처럼 두번째 인자로 변경할 값 전달한다.

defineOptions

<script setup lang="ts">
defineOptions({
  inheritAttrs: false,
});

지정한 속성 이외의 속성들인 nonprop에 대해 붙지 않도록 제어한다.

특정 요소에 붙도록 하려면 해당 요소에서 v-bind="$attrs" 속성을 주면 된다!

주의할 것은, CompositionAPI에서 $attrs에 바로 접근할 순 없다. 이때는 import {useAttrs} from 'vue' 로 import 하여 사용해야한다.