[VUE] computed와 watch

computed와 watch

---

computed 속성

템플릿 내에 너무 많은 연산을 넣으면 코드가 비대해지고 유지보수가 어렵다.

#기본예제

예제보기

예제를 보면, vm.reverseText의 값은 항상 vm.text의 값에 의존한다.  일반 속성처럼 computed 속성에도 템플릿에서 데이터 바인딜 할 수 있다. Vue는 vm.reverseText가 vm.text에 의존하는 것을 알고 있기 때문에 vm.text가 바뀔 때 vm.reverseText에 의존하는 바인딩을 모두 업데이트 할 것이다. 그리고 가장 중요한 것은 우리가 선언적으로 의존 관계를 만들었다는 것이다. 

#computed 속성의 캐싱 vs 메소드

computed 속성 대신 메소드와 같은 함수를 정의할 수도 있다. 최종 결과에 대해 두 가지 접근 방식은 서로 동일하다. 하지만 둘의 차이점은 computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것이다. computed 속성을 해당 속성이 종속된 대상이 변경될 때만 함수를 실행한다. 즉 text가 변경되지 않는 한, computed 속성인 reverseText를 여러 번 요청해도 계산을 하지 않고 기존에 계산되어 있던 결과를 반환한다. 또한 Date.now()처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트 되지 않는다. 이에 비해 메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행한다.

예제보기

#computed 속성 vs watch 속성

Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 watch속성. 다른 데이터 기반으로 변경할 필요가 있는 데이터가 있는 경우 watch를 사용. 하지만 watch 콜백보다 계산된 속성을 사용하는 것이 더 좋다.

예제보기

#computed 속성의 setter 함수

computed 속성은 기본적으로 getter 함수만 가지고 있지만, 필요한 경우 setter함수를 만들어 쓸 수 있다.

예제보기

---

watch 속성

사용자가 만든 감시자가 필요한 경우. watch 옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공한다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용하다.

예제보기

이 경우 watch 옵션을 사용하면 비동기 연산(API엑세스)를 수행하고, 우리가 그 연산을 얼마나 자주 수행하는지 제한하고, 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있다. 

---

참고)

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