옵션 API
data, methods, mounted 같은 객체를 사용, 컴포넌트의 로직을 정의.
옵션으로 정의돈 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출됨
<script>
export default {
// data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출됩니다.
data() {
return {
count: 0
}
},
// methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
// 템플릿 내에서 이벤트 리스너로 바인딩 될 수 있음.
methods: {
increment() {
this.count++
}
},
// 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
// 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
mounted() {
console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
}
}
</script>
<template>
<button @click="increment">숫자 세기: {{ count }}</button>
</template>
컴포지션 API
import 해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의.
SFC에서 컴포지션 API는 일반적으로 <script setup> 과 함께 사용
setup 속성은 Vue가 더 적은 코드 문맥으로 컴포지션 API를 사용하고,
컴파일 시 의도한대로 올바르게 동작할 수 있게 코드를 변환하도록 하는 힌트
예를 들어 <script setup> import 되어 가져온 객체들과 선언된 최상위 변수 및 함수는 템플릿에서 직접 사용
<script setup>
import { ref, onMounted } from 'vue'
// 반응적인 상태의 속성
const count = ref(0)
// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
count.value++
}
// 생명 주기 훅
onMounted(() => {
console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>
<template>
<button @click="increment">숫자 세기: {{ count }}</button>
</template>
* 사실 옵션 API는 컴포지션 API 위에 구현
그렇다면 무엇을 사용??
옵션 API는 일반적으로 OOP 언어 배경을 가진 사용자를 위한 클래스 기반 모델과 더 잘 맞는
"컴포넌트 인스턴스"(예제의 this)의 개념을 중심으로 하며 반응형 세부 사항을 추상화하고 옵션 그룹을 통해
코드 구조를 실행하여 초보자에게 더 친숙
컴포지션 API는 함수 범위 내에서 직접 반응형 변수를 선언.
복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성하는데 중점을 둠
보다 자유로운 형식, Vue에서 반응형이 효과적으로 사용되는 방식에 대한 이해가 필요
-> 그 대가로 로직을 구성하고 재사용하기 위한 보다 강력한 패턴을 가능하게 함
제품용(production)으로 사용하는 경우:
빌드 도구를 사용하지 않거나 Vue를 주로 복잡성이 낮은 시나리오에서 사용할 계획이라면 옵션 API를 사용
Vue로 규모가 있는 앱의 전체를 구축하려는 경우 컴포지션 API + 단일파일 컴포넌트(SFC)를 사용
멀티 앱 인스턴스
동일 페이지에 인스턴스는 하나로 제한되지 않는다.