defineOptions() 매크로 함수

defineOptions()는 Vue 3.3 버전 이상에서 지원되는 매크로 함수로, <script setup> 내부에서 직접 컴포넌트 옵션을 선언할 수 있도록 해줍니다. 이렇게 하면 <script> 블록을 별도로 사용하지 않고도 옵션을 설정할 수 있습니다.

예를 들어, 아래와 같이 사용할 수 있습니다:

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* 추가 옵션 설정 */
  }
})
</script>

이 코드는 매크로로 작동하기 때문에, defineOptions에 선언된 옵션들은 모듈의 전역 스코프로 자동으로 이동됩니다. 따라서 <script setup> 내부에서 선언한 모든 변수(상수 포함)에 접근할 수 없습니다. defineOptions에서는 오직 리터럴 값만 사용할 수 있습니다.

<aside> ❗

• defineOptions() 는 컴포넌트 설정에만 사용하세요. </aside>

실습 - UI

• src/components/BaseCard.vue
• src/App.vue

실습 - defineOptions()

• src/components/BaseCard.vue
• src/App.vue

toValue() 유틸리티 API

toValue()는 다양한 형태의 데이터를 하나의 일반 값으로 통일해주는 함수입니다.

• toValue()는 숫자나 문자 같은 값(value), ref()로 만든 참조 값(ref), 그리고 값을 반환하는 getter 함수까지 모두 일반 값으로 변환합니다.
• 만약 인자로 getter 함수가 들어오면, toValue()는 함수를 실행해 그 결과 값을 반환해 줍니다.

이 점에서 toValue()는 unref()와 비슷하지만, getter까지 처리할 수 있다는 차이점이 있습니다. unref()는 값이나 ref는 변환해 주지만, getter는 그대로 함수로 남겨둡니다. 반면, toValue()는 getter를 실행해 결과 값을 반환하여 값, ref, getter 형태의 모든 인자를 일관되게 다룰 수 있게 도와줍니다.