[Vue3] Computed와 Methods 차이

methods나 computed나 그게 그거 아니야? 라는 생각이 들어 좀 더 공부를 하게 되었다.

 

computed - template내부에 선언된 computed중에서 해당 함수와 연결된 값이 바뀔 때만 해당 함수만을 실행한다.

 

methods -그런거 모르겠고  template내부에 선언된 methods중에서 update라이프사이클이 동작한(=아무 변수나 바뀐)다면 함수를 모두 실행한다.

 

고로, 딱 변화된 부분만을 감지해서 연산을 해주는 것이 computed이다.

 

---

ChatGPT에게 둘의 차이를 예시를 들어 설명해달라고 부탁했다.

 

Vue 3에서 methods와 computed 모두 컴포넌트 안에서 함수를 정의할 수 있는 방법입니다. 하지만 두 가지 기능은 차이가 있습니다.

methods는 일반적인 함수이며 컴포넌트 인스턴스의 메서드로써 호출할 수 있습니다. methods는 데이터나 프로퍼티를 변경하거나, 비동기 작업을 수행할 수 있습니다. methods에서 데이터를 변경하면 화면이 다시 렌더링 됩니다.

computed는 응답형(computed) 속성이라고도 하는데, 이 속성은 계산된 값을 반환합니다. computed 속성은 종속성을 가지고 있으며, 종속성이 변경될 때마다 자동으로 계산하여 새로운 값을 반환합니다.

computed 속성은 템플릿에서 바인딩하는 것이 좋으며, 템플릿에서 참조하면 자동으로 종속성을 추적합니다.

예를 들어, methods를 사용하여 두 수를 더하는 함수를 만들고 호출하는 경우:

<template>
  <div>
    <p>{{ result }}</p>
    <button @click="addNumbers">Add numbers</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 1,
      num2: 2,
      result: null,
    };
  },
  methods: {
    addNumbers() {
      this.result = this.num1 + this.num2;
    },
  },
};
</script>

computed를 사용하여 두 수를 더하는 함수를 만들고, 이 함수를 computed 속성에 할당하여 사용할 수 있습니다.

 

<template>
  <div>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 1,
      num2: 2,
    };
  },
  computed: {
    result() {
      return this.num1 + this.num2;
    },
  },
};
</script>

위의 코드에서 computed 속성의 result는 num1과 num2에 의존하므로, num1과 num2가 변경될 때마다 자동으로 다시 계산됩니다. 이것은 methods로 구현한 것과 달리 템플릿에서 result를 사용할 때 매번 함수를 호출할 필요가 없으므로 효율적입니다.