Vue js 2 - computed

Vue 공식 문서를 보면 computed 속성은 복잡한 로직을 구현할 경우 사용한다고 나와 있습니다.

 

공식문서의 예를 보면 아래와 같습니다.

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

 

이렇게 message 를 거꾸로 나열해서 보여주는 로직이 있습니다. 

위의 예제 코드 처럼 html 코드 속 {{ }} 안에서 로직을 구현해도 괜찮지만, 해당 로직이 다른곳에서 더 사용 될 경우

같은 로직을 한 번 더 작성해야 하는 불편함이 있습니다.

 

이럴 때, computed 속성을 사용합니다.  아래의 코드를 보겠습니다.

<template>
  <div id="app">
     {{ reverseMsg }}
  </div>
</template>

<script>
export default {
    data(){
      return{
        message : '안녕하세요'
      }
    },
    methods : {
     
      
    },
    computed : {
      reverseMsg() {
        return this.message.split('').reverse().join('')
      }
    }
}
</script>

 

위의 {{ message.split('').reverse().join('') }} 로직을 computed 속성안에 함수 형태로 작성 하고 

html 에서 함수 이름을 호출하는 형식으로 불러옵니다. 

* computed 속성은 methods 와 다르게 함수 형태여도 뒤에 ()를 붙이지 않습니다.

 

이렇게 computed 에 로직을 정의해두면 반복적으로 사용해도 코드가 간결해 집니다.

ex )  {{  reverseMsg  }}

       {{  reverseMsg  }}

       {{  reverseMsg  }}

 

그럼 methods에 로직을 정의해서 사용하면 되지 않느냐 라고 생각하실텐데요, 

methods 와 computed 는 차이가 있습니다.

 

computed 는 처음 랜더링 될 때, 미리  message.split('').reverse().join('') 이걸 한번 계산 해두고 

그 값을 계속 가지고 있습니다. (캐싱) 

따라서 반복해서 로직을 호출하더라도 계산이 이미 되어있기 때문에 부하가 없습니다.

또한, data 에 정의해놓은 변수값이 변경되면 자동으로 그것을 감지하여 다시 한 번 계산해 놓습니다.

 

methods는   {{  reverseMsg  }} 를 호출 할 때, 그 시점에 계산을 하기 때문에 반복해서 사용하면

계속 계산을 하기 때문에 비효율적 입니다.