계산된 속성과 감시자

계산된 속성

기본 예제

템플릿에서 사용하는 표현식은 편리하지만 단순한 연산만 해야합니다.

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

이렇게 복잡한 로직은 계산된 속성을 사용해야 합니다.

<div id="example"> <p>원본 메시지: "{{ message }}"</p> <p>뒤집히도록 계산된 메시지: "{{ reversedMessage }}"</p> </div>

var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, computed: { // 계산된 getter reversedMessage: function () { // `this` 는 vm 인스턴스를 가리킵니다. return this.message.split('').reverse().join('') } } })

이렇게요

reversedMessage 를 우리는 computed에서 선언했습니다.

vm.reversedMessage 는 getter 메세지로 반환된다.

계산된 캐싱 vs 메소드

<p>뒤집힌 메시지: "{{ reverseMessage() }}"</p>

// 컴포넌트 내부 methods: { reverseMessage: function () { return this.message.split('').reverse().join('') } }

표현식에서 메소드를 호출하면 계산된 결과와 같은걸 알 수 있습니다.

계산된 속성은 종속성에 따라 캐시가 된다.

message가 변경되지 않는 한, reverseMessage는 바로 반환됩니다.

computed: {
  now: function () {
    return Date.now()
  }
}

이것도 Date.now가 변경되지 않으니 바로 반환됩니다.

캐싱이 왜 필요하냐면, 많은 연산을 하게되면, 서버에 무리가 가기 때문에 캐싱을 하는게 좋다.

계산된 속성 vs 감시된 속성

Vue 인스턴스는 속성을 감시하는게 가능하다.(데이터가 변경될때)

<div id="demo">{{ fullName }}</div>

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })

firstName의 값이 변경될 때 마다

    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },

val 파라매터로 값을 받고, this.fullName = val + ' ' + this.lastName

이걸 실행한다.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

위 코드와 위 코드는 비슷합니다.

계산된 속성이 더 좋은거 같습니다.

계산된 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]
    }
  }
}

computed는 getterd와 setter를 만들어줄 수 있습니다.

감시자

대부분 계산된 속성이 필요하지만. 감시자가 더 좋을 때가 있습니다.

<div id="watch-example">
  <p>
    yes/no 질문을 물어보세요:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

에제입니다.

<!-- 이미 Ajax 라이브러리의 풍부한 생태계와 범용 유틸리티 메소드 컬렉션이 있기 떄문에, -->
<!-- Vue 코어는 다시 만들지 않아 작게 유지됩니다. -->
<!-- 이것은 또한 당신이 사용하기 친숙할 것을 선택할 수 있는 자유를 줍니다. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: '질문을 하기 전까지는 대답할 수 없습니다.'
  },
  watch: {
    // 질문이 변경될 때 마다 이 기능이 실행됩니다.
    question: function (newQuestion) {
      this.answer = '입력을 기다리는 중...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce는 lodash가 제공하는 기능으로
    // 특히 시간이 많이 소요되는 작업을 실행할 수 있는 빈도를 제한합니다.
    // 이 경우, 우리는 yesno.wtf/api 에 액세스 하는 빈도를 제한하고,
    // 사용자가 ajax요청을 하기 전에 타이핑을 완전히 마칠 때까지 기다리길 바랍니다.
    // _.debounce 함수(또는 이와 유사한 _.throttle)에 대한
    // 자세한 내용을 보려면 https://lodash.com/docs#debounce 를 방문하세요.
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = '질문에는 일반적으로 물음표가 포함 됩니다. ;-)'
          return
        }
        this.answer = '생각중...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = '에러! API 요청에 오류가 있습니다. ' + error
          })
      },
      // 사용자가 입력을 기다리는 시간(밀리세컨드) 입니다.
      500
    )
  }
})
</script>

이 예제는 question을 감시하고 methods에서 getAnswer을 실행해줍니다.

watch는 비동기 연산을 합니다.