Vue.js) Computed

데이터의 연산을 처리할 때 사용하는 Computed 사용 예시 입니다.

 

1. data에 fruits 배열에 Apple, Banana, Cherry를 담고 템플릿에 불러옵니다.

<template>
	<section v-if="fruits.length > 0">
		<h1>Fruit</h1>
		<ul>
			<li v-for="fruit in fruits" v-bind:key="fruit">{{ fruit }}</li>
		</ul>
	</section>
   	<section v-if="fruits.length > 0">
		<h1>Reverse Fruit</h1>
		<ul>
			<li v-for="fruit in fruits" v-bind:key="fruit">{{ fruit.split('').reverse().join('') }}</li>
		</ul>
	</section>
</template>

<script>
export default {
	data() {
		return {
			fruits: ['Apple', 'Banana', 'Cherry'],
		};
	},
};
</script>

디렉티브 v-if로 배열 fruits의 요소가 있을 때만 v-for을 이용하여 data에 선언된 fruits배열에 담긴 요소들을 반복하고, v-bind로 key를 배열의 각 요소로 지정해줍니다. 

Fruit

• Apple
• Banana
• Cherry

Reverse Fruit

• elppA
• ananaB
• yrrehC

 

2. fruits.length > 0, fruit.split('').reverse().join('') 부분을 computed에서 연산할 수 있도록 코드를 수정합니다.

<template>
	<section v-if="hasFruit">
		<h1>Fruit</h1>
		<ul>
			<li v-for="fruit in fruits" v-bind:key="fruit">{{ fruit }}</li>
		</ul>
	</section>
	<section v-if="hasFruit">
		<h1>Reverse Fruits</h1>
		<ul>
			<li v-for="fruit in reverseFruits" v-bind:key="fruit">{{ fruit }}</li>
		</ul>
	</section>
</template>

<script>
export default {
	data() {
		return {
			fruits: ['Apple', 'Banana', 'Cherry'],
		};
	},
	computed: {
		hasFruit() {
			return this.fruits.length > 0;
		},

		reverseFruits() {
			return this.fruits.map((fruit) => {
				return fruit.split('').reverse().join('');
			});
		},
	},
};
</script>

 

Fruit

• Apple
• Banana
• Cherry

Reverse Fruit

• elppA
• ananaB
• yrrehC

computed를 사용하면 hasFruit(), reverseFruits()와 같은 연산 함수를 만들어 템플릿에 적용할 수 있습니다.

 

이 처럼 computed를 이용하면 템플릿 내의 코드가 간단해지고 유지보수가 쉬워집니다.

 

참고 문서:

https://v2.ko.vuejs.org/v2/guide/computed.html