[콜럼Vue스] Computed

computed 속성은 Vue에서 제공하는 강력한 기능으로,

데이터나 다른 속성에 의존하는 값을 효율적으로 계산해 반환하는 반응형 속성

기본적으로는 캐싱(caching)을 지원하여,

의존하는 데이터가 변경되지 않으면 다시 계산하지 않고 이전에 계산된 값을 반환한다.

따라서 비용이 많이 드는 연산이나 복잡한 연산을 최적화하는 데 매우 유용하다.

---

computed 속성 기본 사용법

<script setup lang="ts">
import { ref, computed } from 'vue'

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

// 계산된 속성
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

<template>
  <p>이름: {{ fullName }}</p>
</template>

 

• firstName과 lastName이라는 반응형 데이터를 선언.
• computed 속성인 fullName은 firstName과 lastName에 의존해 그 값을 계산한다.
• fullName은 firstName이나 lastName이 변경될 때만 다시 계산되며, 그렇지 않으면 캐싱된 값을 반환한다.

---

computed 속성의 getter와 setter

computed는 기본적으로 getter만 제공되지만, setter를 추가할 수도 있다.

이를 통해 양방향 바인딩이나 값의 조작이 가능하다.

<script setup lang="ts">
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(value) {
    const parts = value.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts[1] || ''
  }
})
</script>

<template>
  <p>이름: {{ fullName }}</p>
  <input v-model="fullName" placeholder="Full Name" />
</template>

 

 

• getter는 firstName과 lastName을 조합해 fullName을 반환.
• setter는 fullName에 값을 설정할 때 이를 firstName과 lastName에 다시 분해해 할당.
• 이로 인해 v-model을 통해 양방향 바인딩이 가능해짐.

---

computed와 methods의 차이점

• computed: 캐싱을 지원하며, 의존하는 데이터가 변경될 때만 계산.
• methods: 호출될 때마다 새로운 값을 계산한다. 캐싱되지 않음.

<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)

// computed 속성 (캐싱됨)
const computedValue = computed(() => {
  return count.value * 2
})

// methods와 같은 함수 (캐싱되지 않음)
const methodValue = () => {
  return count.value * 2
}
</script>

<template>
  <p>Computed 값: {{ computedValue }}</p>
  <p>Method 값: {{ methodValue() }}</p>
  <button @click="count++">Increase Count</button>
</template>

 

 

• computedValue는 count가 변경되지 않으면 캐싱된 값을 사용.
• methodValue()는 호출될 때마다 항상 새로운 값을 계산.