watch vs computed

Computed vs. Watch

computed는 템플릿 내의 값이 data와 종속되었을 경우 사용하는게 좋다.

computed의 값은 캐싱되기 때문에, 리렌더링 됬을 때, 같은 값이 들어왔다면 연산하지 않습니다. 그에 반해 watch는 같은 값이여도 연산을 다시 합니다. 컴포넌트가 리렌더링이 많이 되나, 값이 바뀔일이 없다면 computed를 반드시 사용해야한다.

 

watch는 지정한 값이 변경된 시점에서 내가 원하는 액션(api call, route.push())을 하기 원할 때, 특정 프로퍼티가 변할 때 콜백함수 실행시키고 싶을 때 사용한다.

 

참조1:

https://kyounghwan01.github.io/blog/Vue/vue/computed/#computed-getter-setter

computed와 watch, vue, vuex

 

참조2:

https://blog.jeongwoo.in/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

[Vue.js] watch와 computed 의 차이와 사용법

Vue3 CompositionAPI 내에서 computed, watch 사용법

https://v3.ko.vuejs.org/guide/composition-api-introduction.html#%E1%84%8F%E1%85%A5%E1%86%B7%E1%84%91%E1%85%A9%E1%84%8C%E1%85%B5%E1%84%89%E1%85%A7%E1%86%AB-api%E1%84%80%E1%85%A1-%E1%84%91%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%AD%E1%84%92%E1%85%A1%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2

소개 | Vue.js