[Vue] Computed

템플릿 표현식 내 코드가 길어거나 복잡할 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다.

<span>{{ teacher.lectures.length > 0 ? 'YES' : 'NO' }}</span>

 

computed

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

 

일반 함수로도 같은 형태를 만들 수 있지만 computed가 성능면에서 비용이 더 적게 사용됩니다.

함수는 요청할때마다 값을 불러오지만 computed는 한 번 실행되면 캐시에 저장되기 때문에 재요청되었을 때 저장된 데이터가 반환됩니다.

캐시가 다시 저장되는 시점은 computed에 반응형 데이터가 변경되는 시점입니다.

그렇기 때문에 컴포넌트가 재랜더링 될 때에도 computed는 다시 실행되지 않습니다.

 

computed는 읽기 전용이지만 get()과 set()을 이용하여 쓰기도 가능합니다.

const firstName = ref('홍')
const lastName = ref('길동')

const fullName = computed(() => {
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

console.log(fullName.value) // 홍 길동

fullName.value = '장 삼봉'

console.log(fullName.value) // 장 삼봉