computed와 methods의 차이

Vue.js에서 자주 쓰이는 computed와 methods를 들어본 적이 있을겁니다.

가끔 이 둘 중에서 무엇을 사용해야 할 지 헷갈리는 경우가 있더군요.

그래서 정확하게 알고 사용하기 위해 이 둘의 차이가 무엇인 지 알아봅시다.

 

---

1. computed (계산 속성)

computed는 특정 값이 다른 데이터에 의존해 계산될 때, 사용됩니다.

종속된 데이터가 변경될 때에만 계산이 되는 거에요.

Vue는 computed 속성을 캐시하기 때문에, 관련된 데이터가 변경되지 않는 한 계산된 값을 재사용해요. 이를 통해 Vue 컴포넌트의 상태에 따라 동적으로 변하는 값을 쉽게 관리하여 성능을 최적화할 수 있어요.

 

예를 들어봅시다.

export default {
  data() {
    return {
      firstName: "Kim",
      lastName: "DongSu",
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};

위 코드에서 firstName이나 lastName의 값이 변경될 때만 fullName이 재계산됩니다.

 

그래서 comuted는 데이터의 변경된 형태를 필요로 하거나, 여러 데이터 속성을 조합하여 새로운 값을 만들거나, 복잡한 계산 로직을 캡슐화할 때, 사용해요.

 

---

2. methods (메서드)

methods는 계산보다 액션을 수행하거나 이벤트 핸들러로 자주 사용해요. 주로 특정 데이터를 처리하거나, 이벤트 발생 시 호출되는 함수입니다.

이는 호출될 때마다 항상 함수를 실행하며, 캐싱되지 않아요. 따라서 동일한 데이터를 반환하더라도 매번 함수를 재실행합니다.

 

예를 들어봅시다.

new Vue({
  el: '#app',
  data: {
    message: 'Hello, World!'
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});

위 코드처럼 greet 메서드는 message 속성을 수행합니다. message의 값이 같더라도 호출할 때마다 계산됩니다.

 

---

3. 정리하며

요약하자면 다음과 같습니다.

• computed : 주로 데이터 기반의 계산된 값을 반환하며, 의존하는 데이터가 변경될 때만 재계산
• methods : 특정 동작을 수행하는 함수로, 호출할 때마다 항상 실행

그렇다면 methods는 사용자 인터렉션 or 이벤트에 반응할 때 사용하고, computed는 데이터의 변형된 값을 필요로 할 때 사용하면 될 것 같습니다.

 

참고

pooney 님의 [Vue] 부모 자식 간에 created, mounted 순서

이윤우 님의 Vue 라이프사이클 훅 - created, mounted 차이

인삼추출물 님의 [Vue.js]page 시작 시 created, mounted 차이에 따른 화면 문제