[Vue] Computed 속성

# Computed()

계산된 속성을 정의하는 함수

미리 계산된 속성을 사용하여 템플릿에서

표현식을 단순하게 하고, 불필요한 반복 연산을 줄인다.

 

예를 들어,

<p>{{ todos.length > 0 ? '아직 남았다' : '퇴근!' }}</p>

이런식으로 todos라는 object의 길이에 따라 메세지를 출력할 때, 

todos의 length를 계속 계산하게 됨

만약 이 계산을 템플릿에서 계속 쓴다면 복잡해짐

→ 미리 계산을 해두고, 계속 가져오자

▶ 그때 쓰는게 computed!

 

 

한번 computed로 바꿔볼까

const { createApp, ref, computed } = Vue

computed를 쓰기 위해  가져오고

const restOfTodos = computed(() => {
  return todos.value.length > 0 ? '아직 남았다' : '퇴근!'
})

setup안에 restOfTodos라는 함수를 만들어준다.  이때, script안이므로 todos에 value 추가해주기

<p>{{ restOfTodos }}</p>

기존의 HTML안에는 restOfTodos로 바꿔준다

 

 

• 이때 반환되는 값은 computed ref이며, 일반 refs와 유사하게 계산된 결과를 .value로 참조 가능!
• computed 속성은 의존된 반응형 데이터를 자동으로 추적
• 의존하는 데이터가 변경될 때만 재평가 → 즉, todos가 변경될 떄만 restOfTodos가 업데이트 됨'

 

 

근데 computed 대신에 그냥 method 쓰면 안되나?

const getRestOfTodos = function () {
  return todos.value.length > 0 ? '아직 남았다' : '퇴근!'
}

이런식으로

• computed 속성은 의존된 반응형 데이터를 기반으로 캐시(cached)됨
• 의존하는 데이터가 변경된 경우에만 재평가
• 즉, 의존하는 데이터(todos)가 변경되지 않는한, 처음한 계산 그대로 → 계산을 여러번 안함

하지만, 메서드는 랜더링 할 때마다 함수를 다시 실행 → 아까 맨위에 함수를 안에 쓴거랑 비슷함

 

 

여기서 캐시(cache)란?

데이터나 결과를 일사적으로 저장해두는 임시 저장소

이후에 같은 데이터나 결과를 다시 계산하지 않고 빠르게 접근할 수 있도록 한다

이런식으로 웹페이지들은 캐시를 사용한다 (주로 이미지)

 

그래서 computed랑 method는 각각

• computed
  • 의존하는 데이터에 따라 결과가 바뀌는 계산된 속성을 만들 때 유용
  • 동일한 의존성을 가진 여러 곳에서 사용할 때 계산 결과를 캐싱하여 중복 계산 방지
  • 의존된 데이터가 변경되면 자동으로 업데이트
• method 
  • 단순히 특정 동작을 수행하는 함수를 정의할 때 사용
  • 데이터에 의존하는지 여부와 관계없이 항상 동일한 결과를 반환
  • 호출해야만 실행 됨

▶ 각각의 상황에 맞게 쓰자

 

 

 

 

---

※ computed의 반환 값은 변경하지 말 것

computed의 반환 값은 의존하는 데이터의 파생된 값이므로

읽기 전용으로만 쓰자

 

※ computed 사용 시 원본 배열은 변경하지 말 것

return numbers.reverse() //하지말기

return [...numbers].reverse() //복사본 만들어서 진행