Vue Computed

Computed(계산된 속성)

• 템플릿 내에 간단한 표현식이 아닌 복잡한 로직이 필요할 때 Computed 사용
• 데이터 바인딩 가능

사용법

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <!-- output : Hello -->
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  <!-- output : olleH -->
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this`는 'vm'을 가리킴
      return this.message.split('').reverse().join('')
    }
  }
})

Vue는 vm.reversedMessage가 vm.message에 의존하는 것을 안다.
따라서 vm.message이 바뀔 때 vm.reversedMessage에 의존하는 바인딩은 모두 업데이트한다.

console.log(vm.reversedMessage) // output : 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // output : 'eybdooG'

Computed Caching vs Methods

Computed Caching

• computed 속성은 종속 대상에 따라서 저장(caching)이 됨
• computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수 실행
• 즉, message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환
• Data.now() 처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트 되지 않음
• caching을 필요로 하는가
• 로직이 많은 계산이 필요하지 않을 때

Methods

• 메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행
• caching을 필요로 하지 않는가
• 로직이 많은 계산이 필요할 때
  
  

Getter, Setter

• computed 속성은 기본적으로 getter 함수만 가지고 있지만, 필요한 경우 setter함수를 만들어 쓸 수 있음

사용법

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

이제 vm.fullName = 'John Doe'를 실행하면 설정자가 호출되고,
vm.firstName과 vm.lastName이 그에 따라 업데이트 된다.