computed vs watch

• computed vs watch
  • computed
    • 이미 정의된 계산식에 따라 결과값을 반환할 때 사용
    • 종속 대상을 따라 저장(캐싱) 됨 (단, Date.now() 같이 아무곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트가 안됨 즉, 캐싱을 원하지 않을 때 메소드를 사용하면 된다.)
      [example vuejs code]

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

    • 샘플코드
      [example html code]

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

      [example vuejs code]

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

  • watch
    • 어떤 특정 조건에서 함수를 실행시키기 위한 트리거로써 사용할 수 있음
    • Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 watch 속성을 제공
    • 대부분의 경우 computed 속성이 더 적합하지만 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려고 할 때 watch 옵션을 사용하면 된다.
    • 비동기 연산 (API 엑세스)를 수행하고, 해당 연산을 얼마나 자주 수행하는지 제한하며 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있다. (계산된 속성인 computed 는 이러한 기능을 수행할 수 없다.)
    • 샘플코드
      [example html code]

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

      [example vuejs code]

      <!-- 이미 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>      
      

    • watch 옵션 외에도 명령형 vm.$watch API 를 사용할 수 있다.
      • 사용법은 클릭하여 이동