vue: Computed

method 여러번 보다 computed한번이 낫다 with chatGPT

 

Vue 3에서 computed는 의존하는 반응형 데이터가 변경될 때 자동으로 값을 다시 계산해 주는 계산 속성을 정의하는 데 사용됩니다. computed 속성은 주로 데이터 처리나 변형이 필요할 때 사용하며, 기존의 methods와는 달리, 캐싱된 값을 반환하여 성능 최적화에 유리합니다.

 

기본사용법

Vue 3에서는 computed 속성을 setup 함수 안에서 정의할 수 있으며, 보통 ref나 reactive 데이터의 변화를 반영하기 위해 사용합니다.

import { ref, computed } from 'vue';

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

    // computed 속성 정의
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount,
    };
  },
};

 

위 코드에서 doubleCount는 count의 값이 바뀔 때마다 자동으로 업데이트됩니다.

 

computed와 methods의 차이

computed는 의존하는 값이 변경되지 않는 한 캐시된 값을 사용하지만, methods는 호출될 때마다 실행됩니다.

따라서 계산에 비용이 많이 드는 경우 computed를 사용하는 것이 더 효율적입니다.

import { ref, computed } from 'vue';

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

    // computed 속성
    const doubleCount = computed(() => {
      console.log('computed called');
      return count.value * 2;
    });

    // method 속성
    const getDoubleCount = () => {
      console.log('method called');
      return count.value * 2;
    };

    return { count, doubleCount, getDoubleCount };
  },
};

 

이 코드에서 doubleCount를 여러 번 참조하더라도 값이 변하지 않는 한 computed called는 한 번만 호출됩니다. 반면, getDoubleCount는 호출할 때마다 콘솔에 method called가 출력됩니다.

 

읽기와 쓰기가 가능한 computed

computed 속성은 기본적으로 읽기 전용입니다. 하지만 getter와 setter를 정의해 읽기-쓰기 가능한 computed 속성을 만들 수도 있습니다.

import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    const fullName = computed({
      get: () => `${firstName.value} ${lastName.value}`,
      set: (newValue) => {
        const names = newValue.split(' ');
        firstName.value = names[0];
        lastName.value = names[1];
      },
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};

 

위 코드에서 fullName은 firstName과 lastName을 조합하여 전체 이름을 생성하는 computed 속성이며, set을 통해 fullName을 변경하면 firstName과 lastName 값도 자동으로 업데이트됩니다.

 

정리

• computed는 Vue 3에서 의존하는 값이 변경될 때만 재계산되고, 그 외에는 캐싱된 값을 사용하여 성능이 우수합니다.
• computed 속성은 기본적으로 읽기 전용이지만, getter와 setter를 함께 정의하면 읽기-쓰기 속성으로 사용할 수 있습니다.
• methods와 다르게 computed는 캐시 기능을 제공하여, 자주 사용되는 계산 속성에 유리합니다.