computed 와 watch property 의 쓰임새를 구분하기가 어렵습니다. 개발자님들은 어떻게 구분해서 사용하시나요?
안녕하세요, Vue.js를 접해본지 얼마 안된 프론트엔드 개발자입니다.
Vuejs 첫 질문이네요! ㅎㅎ
computed 와 watch property 의 차이점이 공식 문서에 설명이 되어 있기는 한데 설명이 조금 빈약한 것 같습니다.
https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property
특정 변수의 값을 추적할 때 computed를 쓰는 것이 좋은지 watch를 쓰는 것이 좋은지 굉장히 헷갈리는데요, 저 같은 경우에는 단순히 특정 변수의 값이 변경될 때마다 값이 바뀌어야하는 것이 있으면 값만 리턴해주는 computed를 사용하고, 값을 리턴하는 것 이외에 (예를 들면, 콘솔에 출력)하는 등의 작업이 있으면 watch를 사용하고 있습니다.
제가 잘못 사용하는 것인지, 더 좋은 구분 방법이 있는지 궁금합니다 !
안녕하세요? doctorwoo3 님. 지나가던 웹개발자입니다.
watch 냐? computed 냐? 저도 Vue.js를 처음 접했을 때, 참 많이 고민했던 문제입니다.
질문에 언급하신 방식도 매우 좋다고 생각합니다. 저도 나름의 기준을 가지고 watch 와 computed 를 사용하고 있습니다. 제 경험을 토대로 몇가지 첨언을 드리겠습니다. 먼저 Vue.js 문서를 보면 아래와 같은 설명이 있습니다.
AngularJS를 사용하던 경우 watch를 남용하는 경우가 있습니다. 하지만 명령적인 watch 콜백보다 계산된 속성을 사용하는 것이 더 좋습니다.
Vue.js 에서는 탬플릿 상에 렌더링되는 데이터의 경우 대부분 computed 속성이 적합하다고 추천하고 있습니다.저도 이 부분에 대해서 격하게 동의하고요. 그래서 저의 원칙은 다음과 같습니다.
1. 가급적이면 computed 속성을 사용한다2. computed 가 유용한 경우특히 데이터의 변화에 따라서 화면에 계산된 값을 화면에 출력해야 한는 경우
캐싱 : 입력값이 같을 경우 캐싱했던 데이터를 바로 반환
단순한 계산 외에 비동기 처리 로직이 포함되는 경우
처리가 오래걸리는 수행하는 주기를 제한 가능(lodash의 debounce 이용)
캐싱없이 매번 호출해야하는 경우
탬플릿에 출력하지 않는 데 값의 변화를 관찰해야할 경우
개인적인 경험으로 드린 말씀입니다만 도움이 되시길 바랍니다!
감사합니다~! :)computed : 캐시이용 변동 제어
watch : 실시간 제어
관찰속성이라고 할 수 있습니다. watch 를 쓰는 이유는 주로 긴 처리 시간이 필요한 비동기 처리에 적합하다는 특징이 있습니다.
이 외에 나머지 경우를 computed로 사용하면 될거같습니다.
위의 링크를 읽어보면 좋을것같습니다.
