Vue.js computed & watch

• watch를 사용해야할 경우

1. mustache(템플릿 표현식) 없이 값의 변화를 관찰하고 싶을때는 watch를 사용한다.
2. 비동기적 처리시 사용한다!
3. 값이 바뀔 때마다 매번 호출되어야 할 경우
4. 연산을 얼마나 자주 수행하는지 제한가능(lodash의 debounce 이용)

• computed 사용해야 할 경우

1. 종속된 값의 변화를 관찰하고 싶은 경우

2. mustache(템플릿 표현식) 을 사용하는 경우

3. 동기 호출에 무관할 경우

   input의 v-model로 서버호출이 필요한데 computed 를 사용할 경우, 입력이 멈춰버린다. 값을 직접 리턴해야하기 때문.

4. 동일한 인풋 값에 대해선, 캐싱이 적용된다!

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 : https://skout90.github.io/2018/01/24/Vue/1.1.Computed-VS-Watch/