watcher는 기본적으로 의존성 중 하나가 변경될 때 Vue에 실행을 지시하도록 명령하는 함수이다.
computed property와 비슷한 역할을 하며, 실제로 computed property 대신 watcher를 사용할 수 있다.
아래 코드를 보자.
watcher는 data property를 감시하는 역할을 한다.
따라서 name을 감시할거면 name() 처럼 선언해주면 되고. counter를 감시할거면 counter() 처럼 선언해주면 된다.
파라미터는 2개를 가질 수 있으며, 첫번째 파라미터는 현재값이고, 두번째 파라미터는 그 전 값이다.
위 코드에서는 name property가 바뀌게된다면 watch내부의 name()은 아래의 로직에 따라 실행된다.
의존성이 2개가 필요한 상황이라면?
Watcher는 기본적으로 의존성 하나를 감시하는 함수이다.
따라서 의존성 두개를 감지해야 하는 상황이라면 사용하기가 다소 복잡하다.
사용은 할 수 있다.
이 경우, watch는 한개의 의존성을 감시할 수 있으므로 watch 함수를 2개 만들어서 코드 해야한다.
물론 이렇게 할 수는 있지만 코드가 번잡해진다.
그래서 이런 경우엔 computed property를 사용하는게 더 낫다.
한번에 2개의 의존성을 관리할 수 있으므로 watch에 비해 코드가 많이 간결해졌다.
watcher 함수는 하나의 의존성을 제어할 때 큰 강점이 있다.
watch는 하나의 값이 변하는 지 여부를 파악해서 코드를 짤 때 큰 강점이 있는 기능이다.
특정 값이 변경되변 설정되는 타이머나
특정 데이터가 변경되면 보내야 하는 HTTP 요청 등에 watcher를 사용하면 잘 활용할 수 있다.
'했던것들 > Vue.JS' 카테고리의 다른 글
| Passing Props (0) | 2023.02.16 |
|---|---|
| Methods vs Computed vs Watch (0) | 2023.02.10 |
| computed properties (0) | 2023.02.09 |
| methods의 리렌더링 시 재호출에 관련된 문제점 (0) | 2023.02.09 |
| v-once, v-model(양방향 바인딩) (0) | 2023.02.09 |
