computed API란?

컴퓨티드 api는 컴포지션 Api에서 사용된 컴퓨티드 속성을 의미한다. 

 

<template>
  <div>{{ reversedMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
}
</script>

문자열을 반대로 정리해주는 computed가 보인다. 특정 연산을 담아두는 속성이라고 보면 된다. 기본이 되는 data를 다른 값으로 표현해주게끔 사용한다. (converter 같은 느낌도 들고?)

 

위는 속성으로 'computed 속성'이라 부른다.

 

<template>
    <h1>{{appTitle}}</h1>
    <h4>{{ newTitle }}</h4>
</template>

<script>
import { computed } from 'vue';

export default {
    props:['appTitle'],
    setup(props) {
        
        const newTitle = computed(()=>{
            return props.appTitle + '!!';
        })

        return {newTitle};
    }
}
</script>

컴포지션 API에서는 컴퓨티드API라고 부른다. 여기에서 왜 컴퓨티드가 아니라 메소드를 사용하는 걸까?

 

computed와 method의 차이점

1. 캐싱
   • computed는 결과를 캐싱해.
   • 즉, computed에 사용된 종속 데이터(의존성)가 변하지 않는 이상 재계산을 하지 않아.
   • 반면 method는 호출할 때마다 다시 실행돼.
   • 이 차이가 성능에 중요한 영향을 줄 수 있어

export default {
  setup() {
    const count = ref(1);

    const computedValue = computed(() => {
      console.log("Computed 재계산");
      return count.value * 2;
    });

    const methodValue = () => {
      console.log("Method 실행");
      return count.value * 2;
    };

    return { count, computedValue, methodValue };
  }
}

 

1. • computedValue는 종속된 count.value가 변하지 않으면 콘솔에 로그가 출력되지 않아(캐싱).
   • 반면, methodValue는 호출할 때마다 로그가 출력돼.

 

반응형 데이터와의 자연스러운 통합

• computed는 반응형 시스템과 밀접하게 연동돼 있어.
• computed 값을 사용하는 컴포넌트는 자동으로 업데이트돼.
• 하지만 method를 사용하면 해당 메서드를 수동으로 호출해야 값이 갱신돼.

예시

<template>
  <div>Computed: {{ computedValue }}</div>
  <div>Method: {{ methodValue() }}</div>
</template>

• computedValue는 count가 변할 때 자동으로 UI가 업데이트돼.
• 하지만 methodValue()는 수동으로 호출되기 때문에 더 자주 호출되고, 성능상 비효율적일 수 있어.

computed를 사용하는 이유와 장점

1. 성능 최적화
   • 캐싱 덕분에 계산량이 많은 작업에 효율적이야.
   • 예를 들어, 대량의 데이터 필터링이나 복잡한 계산이 필요할 때 computed가 성능적으로 훨씬 유리해.
2. 코드 가독성
   • computed를 사용하면 상태와 로직을 더 선언적으로 작성할 수 있어.
   • "이 값은 이 데이터를 기준으로 계산된다"는 의도를 코드에서 명확히 표현할 수 있지.
3. 재사용성
   • computed 값은 다른 computed나 watch에서 쉽게 재사용할 수 있어.
   • 이런 재사용성은 복잡한 프로젝트에서 특히 유용해.
4. 반응형 데이터와의 통합
   • computed는 Vue의 반응형 시스템과 긴밀히 연결되어 있어.
   • Vue가 알아서 데이터의 종속성을 추적해 업데이트를 관리해 주지.

---

요약

• computed는 캐싱과 반응형 업데이트 덕분에 성능 최적화와 개발자 경험에 유리해.
• method는 호출할 때마다 실행되기 때문에 간단한 작업에는 적합할 수 있지만, 복잡한 연산이 필요하거나 UI 업데이트와 밀접한 작업에는 computed가 훨씬 효율적이야.