Options API vs Composition API

Vue2 에서 : Options API Vue3 에서 : Composition API

결론적으론 Composition API가 너무 좋다.

Composition API 기반의 강좌가 진행이 될 것임

Options API 와 Composition API 의 차이

Options API 예시 코드

<template>
	<div>
		<button v-on:click="increment">Counter {{ counter }}</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				counter: 0,
			};
		},

		methods: {
			increment() {
				this.counter++;
			},
		},
	};
</script>

<style></style>

Composition API의 예제

<template>
	<div>
		<button v-on:click="increment">Counter {{ counter }}</button>
	</div>
</template>

<script>
	import { onMounted, ref } from 'vue';
	export default {
		setup() {
			const counter = ref(0);
			const increment = () => counter.value++;

			onMounted(() => {
				console.log('마운트!');
			});
			return {
				counter,
				increment,
			};
		},
	};
</script>

<style></style>

두개가 어떻게 다르냐.. Options API data, methods, mounted 나뉘어 있음

Composition API setup() 안에 다 모여있음.

옵션을 선언한 대신 ref, onMounted 등등 Vue 컴포넌트를 작성할 수 있는 API 세트..

왜? Composition API 인가

원래 Options API 를 보면 data, 메서드가 다 나눠져 있음.

그러나 Composition api를 사용하면 관련 데이터, 메서드 등을 모아둘 수 있음 그러면 논리적으로 상당히 괜찮을 수 있음

그러면 하나의 .js 파일로 만들 수도 있음.

논리적 관심사가 같은 애들끼리 모여있게 됨.

오 진짜 괜찮다.

코드의 재사용을 할 수 있는 애들은 Composable 이라고 하는 애라고 한다. 그러면 Mixin도 사용할 필요가 없음.

Composable을 사용하여 코드 재사용을 쉽게 할 수 있다.

Options API 와의 관계

• 기존 OptionsAPI 의 대부분을 대체한다.
• 두개 함께 사용도 가능하다.
• 그래도 그냥 Composition API 로만 개발하는 것이 좋다.

vue 공식 문서상의 좌측에 보면 사용하는 api 별로 선택해서 확인할 수 있으니 참고할 것.

Composition API 에 대하여..

<template>
	<div>
		<h2>반응형 메세지</h2>
		<p>{{ reactiveMesage }}</p>
		<button v-on:click="addReacitveMessage">Add Message</button>
		<h2>일반 메세지</h2>
		<p>{{ normalMessage }}</p>
		<button v-on:click="addNormalMessage">Add Message</button>
	</div>
</template>

<script>
	import { isRef, ref } from 'vue';
	export default {
		setup() {
			const reactiveMesage = ref('Hello Reactive Message');
			const addReacitveMessage = () => {
				reactiveMesage.value = reactiveMesage.value + '!';
			};

			console.log(isRef(reactiveMesage));

			let normalMessage = 'Hello Normal Message';
			const addNormalMessage = () => {
				normalMessage = normalMessage + ':';
			};
			console.log(isRef(normalMessage));

			return {
				reactiveMesage,
				normalMessage,
				addReacitveMessage,
				addNormalMessage,
			};
		},
	};
</script>

<style></style>

위와 같은 경우 ref로 선언한 변수 (반응형 변수)의 경우 즉각 수정이 가능하지만

normalMessage 일반 변수의 경우에는 즉각 수정은 불가능하다.

isRef 를 사용하면 이게 반응형인지 아닌지를 확인해서 알려줌 true/false

Life Cycel Hook

라이프 사이클 훅

인스턴스나 컴포넌트가 생성될 때 미리 정해진 라이프 사이클을 돌아감.

생성, mount, update, unmount 등등 의 단계임.

그 라이프사이클 단계에서 실행되는 함수를 Life Cycle Hook이라고 한다.

ex) onMounted() 등등

onBeforeMount()

setup 안에서 다 사용할 수 있음.

Composition API 의 Setup 함수

일단 예제 코드

<template>
	<div>
		<p>{{ counter }}</p>
		<p>{{ message }}</p>
		<button @click="increment">click!</button>
	</div>
</template>

<script>
	import { ref } from 'vue';
	export default {
		setup() {
			const counter = ref(0);
			const message = ref('hello vue3');
			const increment = () => {
				counter.value++;
			};

			return {
				counter,
				message,
				increment,
			};
		},
	};
</script>

<style></style>

setup 속성 안에서 선언한 변수는 template 안에서 사용할 수 있다.

mounted() 안에서 this 변수를 사용할 수 있다.

첫번째 매개변수로 props 가 넘어온다.

context context.attrs context.slots context.emit context.expose

뭐 이런 것들을 사용한다는데 나중에 또 사용한다.