[Vue.js] Computed 속성

Intro

회사에서 프로젝트를 진행하며 프론트엔드, 벡엔드 구분없이 작업을 하던 중 'Vue.js의 Computed 와  Method 속성의 차이가 정확하게 뭐지? 둘 다 반복적인 코드들의 중복 제거를 위해 있는거 아닌가? 어떤 차이가 있지?' 라는 생각을 가지고 있어서, 정리를 해볼려 한다.

computed 속성

정의

computed 속성은 Vue 인스턴스에서 종속성을 기반으로 계산된 속성을 정의합니다. data 속성이나 다른 computed 속성에 의존하여 값을 자동으로 계산하며, 캐싱(caching) 기능이 있어 종속된 값이 변경될 때만 다시 연산합니다.

특징

• 종속성이 변하지 않는 한 계산된 값을 재사용 합니다.
• 종속성이변하면 자동으로 다시 계산하여 캐싱합니다.
• 복잡한 로직이나 다수의 변수를 조합한 값을 필요로 할 때 유용합니다.

예제

name 또는 age가 변경이 있을 때만 다시 동작하며, 변경되지 않고 재호출 되면 캐싱되어 있던 값을 반환합니다.

<script>
  const name = ref('JJuuuunn');
  const age = ref('30');

  const info = computed(() => {
    return `${name.value}의 나이는 ${age.value}`;
  })
</script>

<template>
  <p>정보 : {{ info }}</p>
</template>

Method 속성

정의

Vue 인스턴스에 정의된 메서드로, 특정 동작이나 값을 반환하는 함수로써, 호출할 때마다 항상 새로운 결과를 계산합니다.

특징

• 캐싱되지 않으며 호출할 때마다 새로 실행됩니다.
• 비동기 작업이나 이벤트 처리 로직을 포함할 수 있습니다.
• 템플릿에서 함수처럼 호출해야 합니다.

예제

info() 는 호출할 때마다 새로운 결과를 반환하며 캐시 되지 않습니다.

<script setup>
  const name = ref("JJuuuunn");
  const age = ref(30);

  function info() {
    return `$(name.value)의 나이는 ${age.value}`;
  }
</script>

<template>
  <p>info: {{ info() }}</p>
</template>

---

정리

구분	Computed	Method
캐싱	캐싱이 적용되어 종속된 데이터가 변하지 않으면 기존 계산 결과를 재사용	호출할 때마다 함수를 실행하여 결과를 반환
호출 방식	속성처럼 접근 가능 ( this.info )	함수처럼 호출 필요 ( this.info() )
사용 목적	데이터 기반으로 계산된 값이 자주 재사용될 때	데이터를 사용하여 매번 새로운 값을 계산하거나, 비동기 작업과 같은 추가 로직을 처리할 때