hyeoneee's blog

이번에 vue.js 개발을 많이 하게되면서

가장 헷갈리게 된 포인트가 이것이다

언제 computed를 쓰고, 언제 watch를 쓰지?

사실 두개다 얻어지는 결과값은 엇비슷하기 때문이다

그래서 이 고민을 많이 했다

그러면 더 이상 고민하지 않도록 정리보도록 하쟈 ㅎㅎ

예제도 쓰면 좋지만 ㅎㅎ vue 공식문서에 있는것을 보면 될듯 싶다.

1. computed : 반응형 getter

- 사용하기 편하고, 자동으로 값을 변경하고 캐싱해주는 반응형 getter

- 선언형 프로그래밍 방식

- 계산된 결과가 캐싱된다. computed 속성은 해당 속성이 종속된 대상이 변경될때만 함수를 실행한다

• 이는 method와 다른 점이다. method를 호추하면, 렌더링을 할 때마다, 항상 함수를 실행한다.

- computed는 computed에 새로운 프로퍼티를 추가해 주어야한다. data와 혼재에서 사용 불가

2. watch : 반응형 콜백

- 프로퍼티가 변경될 때, 지정한 콜백 함수가 실행 : 반응형 콜백

- data에 새로 프로퍼티를 추가 할 필요 없고, 명시된 프로퍼티를 감시할 것이다~를 표현해주면된다.

- vue 공식 문서에, computed와 watch 둘다 가능 한 것은 computed를 쓰라고 명시되어 있다.

• 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복 및 우수해서

3. 언제쓸까?

1) data 에 할당 된 값들 사이의 종속관계를 자동으로 세팅 : computed

2) 프로퍼티 변경시점에 action이 필요할때 (api call , router ...) : watch

3) computed는 종속관계가 복잡할 수록 재계산시점을 알 수 없어서 종속관계의 값을 리턴하는것 이외에는 코드 지양

4) computed와 watch 둘다 가능 한 것은 computed

5) data의 실시간/빈번한 update가 필요한것은 watch,  한번 렌더링 되었을때만 update되면 되는것은 computed

 좀 애매할 수도 있지만 실제로 개발하면서 느꼈던 것이다.

여러 컴포넌트들 사이의 부모-자식관계가 있는데 이와중에 받은 props를 또 자식에서 변경하거나, 하는 요건이 많은데

페이지를 처음 렌더링 할때 1번만 해당 data를 update하면 된다면 compted를

계속해서 다른 컴포넌트 사이의 정보가 업데이트 되면서 해당 정보가 현재 달라졌는지? 실시간으로 보아야한다면 watch를 써 주었다.

6) computed는 이미 정의된 계산식에 따라 결과값을 반환할때,

  watch는 특정한 어똔조건에서 함수를 실행시키기 위한 트리거로 사용 가능

참고

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

medium.com/@jeongwooahn/vue-js-watch%EC%99%80-computed-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%99%80-%EC%82%AC%EC%9A%A9%EB%B2%95-e2edce37ec34