Vue 공부 - computed

computed 속성

아래와 같이 템플릿 내에 표현식을 넣을 수도 있습니다.

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

이렇게 코드를 작성하면 코드가 의미하는 바를 파악하기 어렵습니다. 그렇기 때문에 computed 속성을 사용합니다.

기본 예제

<div id="example">
  <p>원본 메세지: "{{ message }}"</p>
  <p>역순으로 표시한 메세지: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse.join('')
    }
  }
}

vm.reversedMessage가 vm.message에 의존하는 것을 알고 있기 때문에 vm.message가 바뀔 때 vm.reversedMessage에 의존하는 바인딩을 모두 업데이트할 것입니다.

computed 속성의 캐싱 vs 메소드

표현식에서 메소드를 호출하여 같은 결과를 얻을 수도 있습니다.

<p>뒤집힌 메세지: "{{ reversedMessage() }}"</p>

methods: {
  reversedMessage: function() {
    return this.message.split('').reverse().join('')
  }
}

차이점은 computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것 입니다.

• 종속 대상이 변경될 때만 함수를 실행
• 계산에 시간이 많이 걸리는 속성은 computed가 나음
  (메소드는 매번 다시 계산함)

computed 속성 vs watch 속성

• computed 속성: 선언형 프로그래밍 방식
• watch 속성: 명령형 프로그래밍 방식

computed 속성의 setter 함수

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

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