API 스타일

옵션 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)를 사용

멀티 앱 인스턴스
동일 페이지에 인스턴스는 하나로 제한되지 않는다.