[Vue] computed 속성과 method 속성의 차이점

Dragony·2022년 6월 17일
0

Vue.js

목록 보기
2/2

일단 아래의 간단한 예제를 보자.

  <div>
    <input type="text" v-model="num"/>
    <br/>
    1부터 입력된 수까지의 합(computed) : <span>{{ sum }}</span>
    <br />
    1부터 입력된 수까지의 합(method) : <span>{{ sum_method() }}</span>
  </div>

<script>
export default {
  name: "DataBinding",
  components: {},
  data() {
    return {
      num: 0,
   }
  },
  computed: {
    sum() {
      let n = Number(this.num);
      if (Number.isNaN(n) || n < 1) return 0;
      return ((1 + n) * n) / 2;
    }
  },
  methods: {
    sum_method() {
      let n = Number(this.num);
      if (Number.isNaN(n) || n < 1) return 0;
      return ((1 + n) * n) / 2;
    },
   }
 </script>



결과는 동일하다.
그러나 method 속성은 메서드이기 떄문에 sum_method() 와 같이 호출 구문 형식 을 사용해야 한다.

그런데 작성된 형태를 보니 Computed Property를 사용했을 때와 차이점을 느끼기 힘들고, 얼핏보면 Compute Property가 왜 필요한지 이해가 안될 수도 있다.


메서드와 계산형 속성을 사용했을 때의 최종적인 결과물은 같아보이지만, 내부 작동 방식 에는 차이가 있다.

계산형 속성은 종속된 값에 의해 결괏값이 캐싱된다는 점이다.
입력값이 같은 값이라면 계산형 속성인 sum은 캐싱된 결과값을 바로 리턴하지만, sum_method() 메서드는 매번 실행된다.


profile
안녕하세요 :) 제 개인 공부 정리 블로그입니다. 틀린 내용 수정, 피드백 환영합니다.

0개의 댓글