계산된 속성

템플릿 자체에 너무 많은 논리를 넣으면 비대해져 유지관리가 어려워 질 수 있다..
따라서 미리 계산시켜서 템플릿에 노출시켜주자

 

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 계산된 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>책을 가지고 있다:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

computed() 함수에는 getter 로 사용될 함수가 전달돼야 하며, 반환되는 값은 computed ref
일반 ref 와 유사하게  계산된 결과를 publishedBooksmessage로 접근, 계산된 ref는 템플릿에서 자동으로 언래핑, .value 없이 참조 가능

 

계산된 캐싱 vs 메서드

 

<p>{{ calculateBooksMessage() }}</p>

// 컴포넌트 내에서
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

 

계산된 속성 대신 메서드로 동일한 기능을 정의할 수 있음, 결과적으로는 두 가지 접근 방식은 실제로 완전히 동일

차이점은 계산된 속성은 의존된 반응형을 기반으로 캐시된다는 점.

계산된 속성은 의존된 반응형 중 일부가 변경된 경우에만 재평가 됨, 즉 author.books 가 변경되지 않는 한, 여러 곳에서

publishedBooksMessage 에 접근할 경우, getter 함수를 다시 실행하지 않고 이전에 계산된 결과를 즉시 반환.

 

const now = computed(() => Date.now())

 

 

이와 반대로 메서드 호출은 리렌더링이 발생할 때마다 항상 함수를 실행

 

캐싱이 필요한 이유?

거대한 배열을 루프하며 많은 계산을 해야 하는 값비싼 비용의 list 가 있다고 칠 때,

list 에 의존하는 또 다른 계산된 속성이 있을 수 있는데, 캐싱이 없다면 list 의 getter를 불필요하게 많이 실행하게 됨

한번 계산된 것은 다시 getter 함수를 실행하지 않고 계산 해 두었던 결과를 반환하기만 하면 된다.

 

수정 가능한 계산된 속성

계산된 속성은 기본적으로 getter 전용, 계산된 속성에 새 값을 할당하려고 하면 런타임에러가 발생

드물게 "수정 가능한" 계산된 속성이 필요한 경우, getter와 setter 를 모두 제공하여 속성을 만들 수 있다.

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 참고: 분해 할당 문법을 사용함.
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

<template>
// computied 
  <p>{{ firstName }} {{lastName}}</p> // 임창정 소주한병
  <p>{{ fullName = '임창정 소주한병' }}</p> // 임창정 소주한병
  
  //method
  <p>{{ firstName }} {{lastName}}</p> // John Doe
  <p>{{ fullName = '임창정 소주한병' }}</p> // 임창정 소주한병
</template>

 

computied vs 메소드 방식

 

computied 는 원값을 건들여서 캐싱하기 때문에 template에서 값을 변경시키면 원 값이 변경 되지만

메소드 방식은 메소드 방식 그 자체로 실행되기 때문에 그때 계산한 값을 출력함

 

getter에서 사이드 이펙트는 금물

계산된 속성의 getter 함수는 오로지 계산만 수행해야 함으로써, 사이드 이펙트는 없어야 함을 기억하는 것이 중요

예를 들어 getter에서 비동기 요청을 하거나 DOM을 변경하면 안됨

계산된 속성은 다른 값을 기반으로 의도한 값을 도출하는 방법을 선언적으로 정의한 것으로 이해해야함

이것의 유일한 기능은 해당 값을 계싼하고 반환하는 것.

 

계산된 값을 변경하지 말자

계산된 속성에서 반환된 값은 파생된 상태, 임시 스냅샷으로 생각

스냅샷을 변경하는 것은 의미가 없으므로 계산된 반환 값은 읽기 전용으로 처리되어야 하며 변경되지 않아야 함

대신 새 계산을 트리거하기 위해 의존하는 소스 상태를 업데이트!