[Vue]Computed 와 Watch 사용예제

vue.js는 공식홈페이지에 너무 정리가 잘 되어있어 블로그에는 따로 정리를 하지 않는 편인데

가끔 사용법이 헷갈리는경우가 있어 스스로 정리하려고 한다.

https://kr.vuejs.org/v2/guide/computed.html

computed와 watch — Vue.js

 

일단 공식홈페이지에 가면 정리는 잘 되어있다.

 

나는 정리를 할때 단어의 어원부터 찾아본다.

 

computed : 계산이 되었다.

-> 유추하면 이미 계산된 데이터를 처리하는 것 같다.

watch : 동사로 보다의 뜻이다.

-> 아마 어떤 데이터를 감시하는 역할일 거 같다.

 

예제를 통해 알아보자.

[computed]

<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('')
    }
  }
})

결과:

원본 메시지: "안녕하세요"

역순으로 표시한 메시지: "요세하녕안"

 

-> 간단한 연산일때 사용하면 좋다고 한다. methods와 달리 vue가 랜더링 후 더이상 캐싱을 하지 않는다고한다.

methods에 선언하여 사용해도 되지만 성능을 위하여 computed 를 사용하면 좋을 것 같다.

 

[watch]

<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.debouncedGetAnswer()
    }
  },
  created: function () {
    // _.debounce는 lodash가 제공하는 기능으로
    // 특히 시간이 많이 소요되는 작업을 실행할 수 있는 빈도를 제한합니다.
    // 이 경우, 우리는 yesno.wtf/api 에 액세스 하는 빈도를 제한하고,
    // 사용자가 ajax요청을 하기 전에 타이핑을 완전히 마칠 때까지 기다리길 바랍니다.
    // _.debounce 함수(또는 이와 유사한 _.throttle)에 대한
    // 자세한 내용을 보려면 https://lodash.com/docs#debounce 를 방문하세요.
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: 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
        })
    }
  }
})
</script>

결과:

yes/no 질문을 물어보세요: sssss?

입력을 기다리는중.....No

 

Vue는 watch 옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공한다. 

 

watch문에서 잡고있는 data가 변경되면 해당 구문이 실행되는 예제이다.