[Vue] computed / methods 차이

computed

• 데이터에 대한 작업을 수행하고 계산된 값을 반환하는 데 사용
• 템플릿에서 계산된 속성을 참조할 때 메서드처럼 호출X
• Vue는 자동으로 함수를 호출하고 반환 값을 사용 : return 필수
• 괄호 없이 일반 데이터 속성처럼 사용 : {{ computedProperty }}
• 계산된 속성은 종속성이 변경되면 Vue에 의해 자동으로 업데이트

methods

• 이벤트에 의해 트리거되어야 하는 더 복잡한 작업이나 동작에 사용
• 템플릿에서 메서드를 참조할 때 함수를 호출하려면 괄호 ()를 사용

<template>
  <div>
    <p>Computed Property: {{ computedProperty }}</p>
    <p>Method: {{ methodName() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataProperty: 'Hello',
      additionalData: 'World',
    };
  },
  computed: {
    computedProperty() {
      return this.dataProperty + ' ' + this.additionalData;
    },
  },
  methods: {
    methodName() {
      return this.dataProperty + ' ' + this.additionalData;
    },
  },
};
</script>