vue.js의 computed 속성

vue js에 computed 속성이 존재하는데 언제 써야 할지 정리한다.

<p>강의가 존재 합니까?:</p>
<span>{{ teacher.lectures.length > 0 ? 'Yes' : 'No' }}</span>

 

와 같은 코드가 존재할 경우 html태그 안에 작성하는 경우 가독성이 떨어지게 된다.

이런 경우 computed속성을 사용한다.

<p>강의가 존재 합니까?:</p>
<span>{{ hasLecture }}</span>

const hasLecture = computed(() => {
  return teacher.lectures.length > 0 ? 'Yes' : 'No'
})

 

코드가 깔끔해진다.

computed 속성의 장점은 무엇일까?

1) computed 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다.
2) 코드의 가독성과 재사용성

 

computed는 가독성과 재사용성을 향상 시킬뿐만 아니라, 데이터의 변화를 감지하고 자동으로 다시 연산해주는 장점을 가지고 있다.
위의 예시 코드에서, teacher.lectures.length 데이터가 변경된다면, 자동으로 다시 연산하여 화면을 갱신해 줄 것이다.

computed 주의사항

computed속성은 인자를 받지 않는다.
즉, 다음과 같은 코드는 동작하지 않는다.

const hasLecture = computed((teacher.lectures.length ? ) => {
  return  teacher.lectures.length > 0 ? 'Yes' : 'No'
})

또한, http통신 코드를 제외한다.
computed 속성은 기본적으로 템플릿 코드의 가독성을 높이기 위한 기능이다.

axios같은 코드는 methods나 watch에 넣는 것이 적합하다.

computed VS methods

computed속성 대신 메소드와 같은 함수를 정의할 수도 있다.

const hasLecture = computed(() => {
  return teacher.lectures.length > 0 ? 'Yes' : 'No'
})

function existLecture() {
  return teacher.lectures.length > 0 ? 'Yes' : 'No'
}

최종 결과는 동일하다.
그럼 computed와 methods의 차이는 무엇일까?

바로, computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것이다.

computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행한다. 즉 데이터가 변경되지 않는 한, computed 속성인 데이터를 여러 번 요청해도 다시 계산하지 않고 이미 계산되어 있던 결과를 즉시 반환한다. 렌더링시 비용이 적게 드는 셈이다.

이에 비해 메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행한다.

정리하면

 

1) computed는 캐싱된다.
2) computed는 캐싱으로 인해 렌더링시 비용이 적게든다.
3) method는 파라미터가 올 수 있다.

computed VS watch

Vue는 Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 watch 속성을 제공한다.

computed와 watch 모두 데이터의 변화를 감지한다.
그럼 computed와 watch의 차이점은 무엇일까?

바로, computed는 선언형 프로그래밍이고, watch는 명령형 프로그래밍이라는 차이가 있다.
computed 속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 선언형 프로그래밍이고, watch는 감시할 데이터를 지정하고, 그 데이터가 바뀌면 선언한 함수를 실행하라는 방식으로 명령형 프로그래밍이다.

일반적으로 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복이 적은 등 우수하다고 평가하는 경향이 있다.
그러므로, 복잡한 로직이나 무거운 처리를 해야하는 경우 watch를 사용하고, 연산작업은 computed를 사용하는 것이 좋다.

다음 코드에서 computed(선언형 프로그래밍)와 watch(명령형 프로그래밍)의 차이를 볼 수 있다.

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

watch(firstName, (cur, prev) => {
  fullName.value = cur + ' ' + lastName.value;
})

watch(lastName, (cur, prev) => {
  fullName.value = firstName.value +' ' + cur;
})

 

출처 : [Vue.js] computed 속성