[Vue] Watcher

📚 오늘은 watch()함수에 대해서 다뤄보도록 하자.

1. Watch()

하나 이상의 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출

2. watch 구조

watch(source, (newValue, oldValue) => {
	...
})

1) 첫번째 인자 (source) : watch가 감시하는 대상(반응형 변수, 값을 반환하는 함수 등

2) 두번째 인자 (callback function) : source가 변경될 때 호출되는 콜백 함수

• newValue : 감시하는 대상이 변화된 값

• oldValue(optional) : 감시하는 대상의 기존 값

3. watch 예시

버튼을 누르게 되면

이런식으로 출력이 된다.

4. Computed vs Watchers

	Computed	Wathcers
공통점	- 데이터의 변화를 감지하고 처리
동작	의존하는 데이터 속성을 계산된 값을 반환	특정 데이터 속성의 변화를 감시하고 작업을 수행(side-effects
사용 목적	계산한 값을 캐싱하여 재사용 중복 계산 방지	데이터 변화에 따른 특정 작업을 수행
사용 예시	연산된 길이, 필터링된 목록 계산 등	DOM 변경, 다른 비동기 작업 수행, 외부 API와 연동 등