Vue.js) 컴포지션API - 기본 옵션과 라이프 사이클

1.  data

// App.vue
<template>
	<h1>{{ count }}</h1>
	<h1>{{ message }}</h1>
</template>

<script>
export default {
	data() {
		return {
			count: 0,
			message: 'Hello world!',
		};
	},    
};
</script>

// App.Composition.vue
<template>
	<h1>{{ count }}</h1>
	<h1>{{ message }}</h1>
</template>

<script>
import {ref} from 'vue';
export default {
	setup() {
		const count = ref(0);		
		const message = ref('Hello world!');
        
		return {
			count,
			message,
		};
	},
};
</script>

0

Hello world!

 

data에 정의할 때 컴포지션 API에서는 ref를 import 하고 ref 매개변수에 초기값을 설정해 줍니다. 그리고 return 부분에 선언한 데이터를 return 해줍니다.

 

2. methods 

// App.vue
<template>
	<h1 @click="increase">{{ count }}</h1>
	<h1 @click="changeMessage">{{ message }}</h1>
</template>

<script>
export default {
	data() {
		return {
			count: 0,
			message: 'Hello world!',
		};
	},
	methods: {
		increase() {
			this.count += 1;
		},
		changeMessage() {
			this.message = 'Good!';
		},
	},
};
</script>

// App.Composition.vue
<template>
	<h1 @click="increase">{{ count }}</h1>
	<h1 @click="changeMessage">{{ message }}</h1>
</template>

<script>
import {ref} from 'vue';
export default {
	setup() {
		const count = ref(0);
		function increase() {
			count.value += 1;
		}

		const message = ref('Hello world!');
		function changeMessage() {
			message.value = 'Good!';
		}

		return {
			count,
			increase,
			message,
			changeMessage,
		};
	},
};
</script>

메서드 호출 전

0

Hello world!

메서드 호출 후

1

Good!

 

methods 속성을 컴포지션 API에 적용하기 위해선 setup 내부에 함수를 정의해 주고 결과를 리턴해주면 됩니다. 이때 선언한 데이터들은 ref 객체이므로. value 수식어를 붙여주어야 합니다. 

data와 마찬가지로 선언한 함수를 return 해주면 됩니다.

 

3. computed

// App.vue
<template>
	<h1>{{ count }} / {{ doubleCount }}</h1>
	<h1>{{ message }} {{ reverseMessage }}</h1>
</template>

<script>
export default {
	data() {
		return {
			count: 1,
			message: 'Hello world!',
		};
	},
	computed: {
		doubleCount() {
			return this.count * 2;
		},
		reverseMessage() {
			return this.message.split('').reverse().join('');
		},
	},
};
</script>

// App.Composition.vue
<template>
	<h1>{{ count }} / {{ doubleCount }}</h1>
	<h1>{{ message }} / {{ reverseMessage }}</h1>
</template>

<script>
import {ref, computed} from 'vue';
export default {
	setup() {
		const count = ref(1);
		const doubleCount = computed(() => count.value * 2);

		const message = ref('Hello world!');
		const reverseMessage = computed(() =>
			message.value.split('').reverse().join('')
		);

		return {
			count,
			doubleCount,
			message,
			reverseMessage,
		};
	},
};
</script>

1 / 2

Hello world! / !dlrow olleH

computed 속성을 컴포지션 API에 적용하기 위해서 computed를 import 후에 화살표 함수로 연산된 값을 return 받아 선언한 데이터에 담아주면 됩니다. 이때 주의할 점은 computed에 쓰이는 선언된 데이터도 ref 객체 형태기 때문에. value 수식어를 붙여야 합니다. 마지막으로 return 부분에 명시해 주면 됩니다.

 

4. watch

// App.vue
<template>
	<h1 @click="increase">{{ count }}</h1>
	<h1 @click="changeMessage">{{ message }}</h1>
</template>

<script>
export default {
	data() {
		return {
			count: 0,
			message: 'Hello world!',
		};
	},
	methods: {
		increase() {
			this.count += 1;
		},
		changeMessage() {
			this.message = 'Good!';
		},
	},
	watch: {
		count(newVal) {
			console.log(newVal);
		},
		message(newVal) {
			console.log(newVal);
		},
	},
};
</script>

// App.Component.vue
<template>
	<h1 @click="increase">{{ count }}</h1>
	<h1 @click="changeMessage">{{ message }}</h1>
</template>

<script>
import {ref, watch} from 'vue';
export default {
	setup() {
		const count = ref(0);
		watch(count, (newValue) => console.log(newValue));
		function increase() {
			count.value += 1;
		}

		const message = ref('Hello world!');
		watch(message, (newValue) => console.log(newValue));
		function changeMessage() {
			message.value = 'Good!';
		}

		return {
			count,
			increase,
			message,
			changeMessage,
		};
	},
};
</script>

watch 속성을 컴포지션 API에 적용하기 위해서 watch를 import 후에 watch(감지할 데이터, 콜백 함수) 형식으로 사용하면 위와 같이 console 창에 변화가 감지될 때마다 변화된 데이터를 출력합니다.

 

5. 라이프 사이클

// App.vue
<template>
	<h1>{{ count }}</h1>
	<h1>{{ message }}</h1>
</template>

<script>
export default {
	data() {
		return {
			count: 0,
			message: 'Hello world!',
		};
	},
	created() {
		console.log('created');
		console.log(this.count);
		console.log(this.message);
	},
	mounted() {
		console.log('mounted');
		console.log(this.count);
		console.log(this.message);
	},
};
</script>

// App.Composition.vue
<template>
	<h1 @click="increase">{{ count }} / {{ doubleCount }}</h1>
	<h1 @click="changeMessage">{{ message }} / {{ reverseMessage }}</h1>
</template>

<script>
import {ref, onMounted} from 'vue';
export default {
	setup() {
		const count = ref(0);
		const message = ref('Hello world!');
        
        // created()와 같음
		console.log('created', count.value, message.value);

		onMounted(() => console.log('mounted', count.value, message.value));

		return {
			count,
			message,
		};
	},
};
</script>

컴포지션 API에서 라이프 사이클 훅을 사용하려면 on을 붙여 사용할 수 있습니다. 

* setup은 beforeCreate, created 라이프사이클 훅 사이에 실행되는 시점(setup() 직전 -> beforeCreate(), setup() 직후 -> created())이므로 created()를 명시적으로 정의할 필요가 없습니다.

라이프 사이클 훅	setup 내부의 라이프 사이클 훅
beforeCreate	x
created	x
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

 

 

참고 문서:

https://ko.vuejs.org/api/