Vue Computed란? 사용 해야 하는 이유

Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다.

computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다.

 

Computed는 언제 사용해야 하는가?

<p>{{ price + '원' }}</p>

위와 같이 price 값 뒤에 원이라는 단위를 붙여야 된다면 template에서 넣어 줄 수 있습니다.

하지만 이렇게 하게 된다면, 문제점이 있습니다.

1. 복잡한 연산의 경우 알아보기 어렵습니다.
2. 매번 컴포넌트가 렌더링 될 때마다 실행됩니다.

 

computed 기능을 사용하여 연산하게 되면

해당 연산이 따로 분리되기 때문에 유지보수에 좋고, 알아보기 쉽습니다.

 

price라는 값의 의존성을 가지게 되며 price 값이 변경될 때만 연산을 진행합니다.

price 값이 변경이 없으면 연산된 값을 캐시로 가지고 있어서 따로 연산을 진행하지 않아 성능 향상에 도움이 됩니다.

 

단, Computed 속성에서 사이드 이펙트를 발생시키면 안됩니다.

비동기 요청을 하거나, Dom을 업데이트를 하면 안되고, 오로지 계산하는 역할만 해야 합니다.

 

Computed 사용 방법

Composition API

 const firstName = ref('power');
 const lastName = ref('ku');
 const fullName = computed(() => {
   return firstName.value + ' ' + lastName.value;
 })

<template>
	<p>{{ fullNmae }}</p>
</template>

Options API

Computed 속성 안에 하나 만들어 주고, 연산이 완료된 값은 return 합니다.

Vue.component("App", {
  data() {
    return {
      price: 100
    };
  },
  computed: {
    priceFormat() {
      return this.price + '원';
    }
  }
})

template에 Computed에서 만든 속성 값을 입력합니다.

<p>가격: {{ priceFormat }}</p>

Computed 사용 예시

See the Pen Untitled by powerku (@powerku) on CodePen.