script setup

Ⅰ. 이 글의 목표이번 글의 목표는 저위험 컴포넌트부터 Vue 3 Composition API로 바꿔 보는 연습을 해보는 것입니다.이미 Vue 3 + Compat build까지 해둔 상태라고 가정하고, 이번 글에서는기존 Options API 컴포넌트 → Composition API Ⅲ. export default { ... } → Vue 3에서는 mixin보다 composable 함수를 권장합니다.같은 기능을 composable로 옮겨보면 아래와 같습니다.// src/composables/useDateFormat.js (변경 후)export function useDateFormat { const formatDate = (date) => { if (!date) return '' ..

1. 서론Vue 3 공식 문서와 예제들을 보다 보면위와 같은 코드보다 아래와 같은 코드가 더 자주 보입니다.Vue에서는 export default { setup() { ... } } 보일러플레이트템플릿에서 쓰려면 return { count, increment } 해줘야 함 export default 없음setup() 함수 선언도 없음return도 없음 {{ props.msg }} 업데이트 defineProps, defineEmits는 전역 함수처럼 보이지만, 실제로는 컴파일러가 처리하는 매크로입니다.import 할 필요 없고, 자식 인풋 포커스defineExpose({ focus })로 노출한 메서드는 부모에서 ref로 잡았을 때, focus()로 접근 가능합니..