Vue 컴포넌트는 Options API와 Composition API 두 가지 스타일로 작성할 수 있다.
Options API
script 태그 내부에 export default 객체를 export 하여 사용한다. 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출되어, this로 접근하여 사용한다.
<script>
export default {
data() {
//...
},
methods: {
//...
},
mounted() {
//...
},
}
</script>
Composition API
script 태그에 setup 속성과 함께 사용한다. <script setup> 좀 더 자유로운 형식으로 사용할 수 있다.
<script>
import { ref, onMounted } from 'vue'
const count = ref(0)
const methods1 = () => {
//...
}
onMounted(() => {
//...
})
</script>
컴포지션 API에서 props 사용하기
defineProps
<!-- ts 사용방식 -->
<script setup lang="ts">
defineProps({
title: String,
likes: Number,
})
</script>
<!-- ts 사용방식 -->
<script setup lang="ts">
defineProps<{
title?: string
likes?: number
}>()
</script>