vue 3 - computed (computed vs method)

😎 vue 3 - computed (computed vs method) 

composition API를 기준으로 합니다

✅  computed

vue의 함수형 속성으로, 어떠한 값을 계산하여 리턴하는 함수로 사용되며 연결된 data가 변경되면 값을 다시 계산하여 바인딩한다
즉, 옵저버의 역할을 한다

기본적인 문법은 아래와 같다

<input :value="text" @input="event => text = event.target.value">
<div>sumC: {{ sumC }}</div>

const text = ref(1)
const sumC = computed(()=>{
    return text.value * 1
})

// sumC: 1

기본적으로 getter를 제공하며, 필요에 따라 setter를 설정해서 사용할 수 있다
getter와 setter를 통해 읽기, 쓰기가 가능하며 setter를 정의하지 않고 값을 업데이트 할 경우 에러가 출력된다

const firstName = ref('kim')
const lastName = ref('coding')

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

fullName.value = "hello world" // firstName, lastName이 변경된다
console.log(fullName.value) // hello world

getter 와 setter 방식은 아래처럼 사용할 수 있다

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

const firstName = ref('hello')
const lastName = ref('world')

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

console.log(fullName.value)
</script>

ref의 값을 변경하는지 computed의 값을 변경하는지의 차이이며
getter와 setter를 사용해서 computed를 제어하는 것이 더 명시적이며 가독성을 높일 수 있는 방법이기에

computed의 값을 직접 변경할 땐 getter와 setter를 사용하는 것이 더 바람직한 방법이라고 본다

 

✅  method

일반 method를 사용해도 computed와 동일한 결과 값을 얻을 수 있다

<input :value="text" @input="event => text = event.target.value">
<div>sumM(): {{ sumM() }}</div>

const text = ref(1)
const sumM = ()=>{
    return text.value * 1
}

// sumM: 1

 

✅  computed vs method

 

두 가지 접근 방식의 결과 값은 동일하고 차이점은 computed는 반응형을 기반으로 캐시된다는 점이다
즉, computed는 연결된 값(데이터)이 변경된 경우에만 재평가된다
연결된 값이 변경되지 않는다면 재실행하지 않고 이전에 계산된 결과를 반환한다

<input :value="text" @input="event => text = event.target.value">
<div>sumM(): {{ sumM() }}</div>
<div>sumC: {{ sumC }}</div>
<div>sumM(): {{ sumM() }}</div>
<div>sumC: {{ sumC }}</div>

const text = ref(1)

const sumC = computed(()=>{
  console.log("sumC")
  return text.value * 1
})

const sumM = ()=>{
  console.log("sumM")
  return text.value * 1
}

값의 변화 없이 computed와 method를 각 2번 호출할 경우 결과는 아래와 같다

method는 값이 같아도 2번 호출을 그대로 실행하고,
computed는 1번 호출 후 값이 같기 때문에 이전에 캐싱된 값을 반환해서 1번만 호출됐다

method는 update 라이프사이클이 작동(렌더링)한다면 함수를 재실행하고
computed는 연결된 값이 변경 되어야만 재실행한다

 

결론

캐싱된 값을 사용해도 되는 복잡한 로직의 경우 함수를 매번 다시 계산하는 것보다는
캐싱된 값을 재사용하는 것이 성능적으로 더 효율적일 것이다
즉, 로직이 복잡하거나 불러올 데이터가 큰 경우에는 computed를 사용하고 캐싱을 원하지 않는 경우에만 method를 사용하자