💡[Vue.js] Computed vs Methods vs watch

✅ computed

계산해야하는 목표 데이터를 정의하는 선언형 프로그래밍 방식으로, 저장된 결과를 반환(캐싱)함으로 종속 대상의 변경이 일어나기 전까지 호출 되지 않는다.

예시

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
	new Vue({
  		el:'#app', 
  		data : {
  			message: 'hello Vue!'
  		},
  		computed : {
  			reversedMessage: function(){
  				return this.message.split('').reverse().join('');
  			}
  		}
  	});
</script>

결과

• data 속성 값의 변화에 따라 자동으로 다시 연산한다.
• reversedMessage()가 미리 연산한 결과를 가지고 있다가 화면에 결과만 표시한다.

✅ methods

렌더링이 일어날 때마다 항상 함수를 실행한다.

예시

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMsg">문자열 역순</button>
</div>

<script>
  new Vue({ 
      el:'#app',
      data: {
          message:'Hello Vue!'
      },
      methods: {
          reverseMsg: function(){
              this.message =  this.message.split('').reverse().join('');
              return this.message;
          }
      }
  })  
</script>

결과

• 앞에서 살펴본 computed 속성으로 문자열 순서를 바꾼 코드와 동일한 결과를 나타낸다.
• 차이점은 methods 속성은 [문자열 역순] 버튼을 클릭했을 때만 순서를 역으로 변환한다.

📍computed와 methods의 차이점

• computed 속성은 데이터가 변경되지 않는 한 이전의 계산 값을 가지고 있다가, 필요할 때 바로 반환해 준다.
• methods 속성은 수행할 때마다 연산을 하기 때문에 별도의 캐싱을 하지 않는다.
• 따라서, 복잡한 연산을 반복 수행하는 화면에서는 computed 속성을 이용하는 것이 효율적이다.

✅ watch

데이터가 바뀌면 특정 함수를 실행하려는 명령형 프로그래밍 방식 이다.

예시

<div id="app">
    <input v-model="message">
</div>

<script>
    new Vue({ 
        el:'#app',
        data: {
            message: 'Hello Vue!'
        },
        watch: {
            message: function(data){
                console.log("message의 값이 바뀝니다 :", data);
            }
        }
    });
</script>

결과

• 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다.
• input box의 입력 값에 변화가 있을 때마다 watch속성에 변화된 값을 로그에 출력한다.
• 간단한 연산에 적합한 computed속성과 달리, watch속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.