Vue2와 Vue3

Vue2

Options API

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('애플리케이션이 마운트 되었습니다!');
	},
};

Vue3

Composition API

Composition API는 옵션(data, methods, ...)을 선언하는 대신 가져온 함수(ref, onMounted, ...)를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트를 말한다.

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

// count 관련 로직 -1
const counter = ref(0);
const increment = () => {
	counter.value++;
};

// books 관련 로직 -2
const books = reactive([]);
const addBook = (title, author) => {
	books.push({ title, author });
};

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

Composition API의 장점

• 동일한 논리적 관심사 코드가 그룹화 되어 있어 코드를 분석, 유지보수하기가 용이해진다.
• Composable 함수의 형태로 로직의 재사용이 가능하다.

Composition API의 종류

• setup()
• 반응형 API (Reactivity API)
• 라이프 사이클 훅 (Lifecycle Hooks)
• 종속성 주입 (Dependency Injection)