2_Option API vs Composition API

[Option API]

: 논리적 관심사 (counter,books)와 이것들을 처리하는 코드가 각각 따로 있어서 알아보기 어려움.

export default {
	data() {
		return {
			counter: 0,
			books: [],
		};
	},
	methods: {
		increment() {
			this.counter++;
		},
		addBook(title, author) {
      this.books.push({ title, author });
    },
	},
	computed: {
    firstBook() {
      return this.books[0];
    }
  }
	mounted() {
		console.log('애플리케이션이 마운트 되었습니다!');
	},
};

 

[Composition API] 

• hook를 사용하여 관련 코드 조각을 함께 그룹화.
• Composables을 사용하면 애플리케이션 전체에서 코드를 매우 쉽게 재사용가능.

<script setup>
import { onMounted, reactive, ref } from 'vue';

const counter = ref(0);
const increment = () => {
	counter.value++;
};

const books = reactive([]);
const addBook = (title, author) => {
	books.push({ title, author });
};

onMounted(() => {
	console.log('애플리케이션이 마운트 되었습니다!');
});
</script>

 

[Options API와 관계]


1 ) Composition API로 기존 모든 사용 사례를 커버 가능?

Composition API를 사용할 때 여전히 필요할 수 있는 몇 가지 옵션(`props`, `emits`, `name` 및 `inheritAttrs`)만 있습니다. `<script setup>`을 사용하는 경우 `inheritAttrs` 옵션만 필요할 수 있는 유일한 옵션입니다.

2) 두 API를 함께 사용할 수 있습니까?

Options API 구성 요소의 `setup()` 옵션을 통해 Composition API를 사용할 수 있습니다.

그러나 기존 옵션 API 코드베이스가 있는 경우에만 그렇게 하는 것이 좋습니다. (예를 들어 Composition API로 작성된 외부 라이브러리와 통합해야 하는 경우)

3) Options API가 deprecated 될 예정인가요?

아니요, 그렇게 할 계획이 없습니다. Options API는 Vue의 필수적인 부분이며 많은 개발자들이 Vue를 좋아하는 이유입니다. 또한 합성 API의 많은 이점은 대규모 프로젝트에서만 나타나고 옵션 API는 복잡도가 낮거나 중간인 많은 시나리오에 대한 확실한 선택으로 남아 있습니다.