watch, computed 속성

<watch>

• 데이터의 변화에 따라 특정 로직을 수행하는 속성
• ex) 예시 num의 변화에 따라 log를 찍는 로직을 수행

 <script>
    new Vue({
      el: '#app',
      data: {
        num: 10
      },
      watch: {
        num: function() {
          this.logText();
        }
      },
      methods: {
        addNum: function() {
          this.num = this.num + 1;
        },
        logText: function() {
          console.log('changed');
        }
      }
    })
  </script>

 

 

<computed vs method>

• 캐싱 차이 : computed는 종속 대상을 따라 저장(캐싱) 된다. 해당 속성이 종속된 대상이 변경될 때만 함수를 실행. 즉 {{message}}의 경우 message가 변경되지 않는 한 computed 속성은 여러번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환. 
• 이에 반해 method를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행한다. 

 

<computed vs watch>

• computed : 계산해야 하는 목표 데이터를 정의하는 방식으로 '선언형 프로그래밍' 방식.validation, text, 연산에 적합
• watch : 감시할 데이터를 지정하고 그 데이터가 바뀌면 함수를 실행하라는 방식의 '명령형 프로그래밍' 방식. 데이터 요청에 적합 (무거운 작업)

https://vuejs.org/guide/essentials/computed.html