[Vue.js] 6. computed 와 watch에 대한 이해와 예제

해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면

Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기

 

 

Computed

복잡한 로직을 계산해야한다면 Computed를 사용하세요.

<div id="app">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>

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

참고: https://jsfiddle.net/qudcks0703/y1zef7or/77/

 

위 코드는 역순으로 메세지를 변경하는 함수를 적용한 결과입니다. 템플릿 문법 {{}} 내에서 로직을 작성할 수 있지만 Vue는 {{}] 내에 복잡한 로직을 작성하는 것을 지양하라고 권고하고 있습니다.

 

 

그렇다면 이런생각이 들 수 있겠군요? 지금까지 배웠던 Methods 함수를 생각해보면

Computed와 Methods와 비슷하게 이벤트를 받는다는 점을 보아 같아 보이네요.

그렇지만 Methods와 Computed를 조금 다른 부분이 있습니다. 

참고: https://jsfiddle.net/qudcks0703/y1zef7or/92/

 

 

위 페이지를 실행해보면 computed는 항상 동일한 값을 출력하는 데에 반해 Methods는 값이 변하는 걸 볼 수 있죠.

Methods와 Computed는 결과를 반환한다는 점은 동일하지만 Computed는 어떤 종속된 대상을 캐싱(저장)하여 값을 출력합니다. 즉 Computed가 바라보는 Vue에 선언한 Data가 변해야지만 값이 변하는 메서드지만 Methods는 매서드를 호출할때마다 계산하여 처리합니다. 이 때문에 복잡한 로직을 계산할때에는 Methods 보단 Computed를 사용하라고 합니다. 

++ 추가로 메서드를 사용하는 방법또한 서로 다르네요...? 이건 처음알았다는...

(사실 저는 Computed는 한번도안써봐서.. 모든 걸 Methods로만 사용했답니다...)

 ☆기억☆ computed는 this.함수 / methods는 this.함수() 

 

 

 

Watch

 Watch는 Vue 인스턴스의 데이터 변경을 관찰하고 그것에 반응하는 속성입니다. 데이터가 변경됬을 때 어떤 훅을 생성하고 싶을 때 사용하면 유요하지만 Vue에선 Computed속성을 사용하는 것을 선호하더군요..

(필자는 Watch 속성이 정말 매력있다라고 생각하고 실무에서 자주 사용하는 것 같습니다. Computed랑은 엄연히

다르다고 생각하구요.)

 

<div id="app">
  <span> Value= {{value }}</span> <br/>
  <span>changeValue= {{ changeValue }}</span> <br/><br/>
  <button @click="change">
    변경
  </button>
</div>

new Vue({
  el: '#app',
  data: {
  	value:0,
    changeValue:'',
  },
  watch:{
  	value(){
    	this.changeValue=this.value;
    }
  },
  methods:{
  	change(){
    	this.value++;
    }
  }
})

참고: https://jsfiddle.net/qudcks0703/y1zef7or/102/

위 코드는 value가 변경시에 watch문이 value()가 실행되면서 changeValue를 변경하고 있습니다.

버튼을 클릭하면 value가 변경되고 watch가 실행되는 샘이죠. 이렇게, 어떤 값이 변경할 때 훅을 만들고 싶을 때 

watch를 사용하시면 좋을 것 같습니다.

*watch 종속 방법= data의 속성명과 watch에 메서드 명과 같아야합니다. 

 

++추가

실무에서 watch를 많이 이용하면서 watch가 안되는 data도 있더군요. 그거에 대해 참고 해주세요

Type 배열: https://jsfiddle.net/qudcks0703/y1zef7or/110/

Type 맵: https://jsfiddle.net/qudcks0703/y1zef7or/112

 

위 결과를 보았을때 배열은 값 변경에 따라 watch문이 실행되지만 key,value를 가지는 map타입 같은 경우는 값을

변경하지 못하더군요. 하지만 deep속성을 주면 map 내부의 값이 변경하면 바꿀 수 있습니다. 이 부분은 추후에 다루도록 하겠습니다.