15. Watch, WatchEffect

Watch

 

우리는 종종 반응형 상태가 변경 되었을때 감지하여 다른 작업(api 호출 등)을 수행해야 하는 경우가 있습니다.

예를 들어 어떤 상태가 변경 되었을때 DOM을 변경하거나 비동기 작업을해서 다른 상태를 변경하는 것입니다.

 

Compositon API의 watch 함수를 사용하여 반응형 상태가 변경 될 때마다 특정 작업을 수행할 수 있습니다.

 

watch의 첫번째 인자는 감지할 데이터, 두번째 인자는 콜백 함수 () =>{}

콜백 함수의 매개변수로는 (변경된 새로운값, 이전 값)

 

watch (감지 데이터, (새 값, 이전 값) => {  });

---

 

watch의 첫번째 매개변수로 getter 함수를 넣어 줄 수있다.

---

watch의 매개변수로 array를 넘길 수 도 있다. 결과도 array로 받는다.

---

object 타입의 반응형 데이터도 감지 가능하다.

그런데 객체의 특정 값을 감지하고 싶을때 getter함수 없이 obj.count 라고 찾으면 찾을 수없다. 

반응형 데이터가 아니라 그냥 number 타입이기 때문이다. 

---

deep option

 

반응형 객체를 직접 watch() 하면 암시적으로 깊은 감시자가 생성됩니다.

즉, 속성 뿐만아니라 모든 중첩된 속성에도 드리거 됩니다. 속성의 속성들까지 변경되도 감지합니다.

name, age, hobby 만 변경되는지 감시하고 싶은대 obj.count가 변경되도 watch가 실행된다는 말 입니다.

 

하지만, getter function 으로 객체를 넘길 경우에는 객체의 값이 바뀔 경우에만 트리거 됩니다.

즉, 중첩된 속성은 트리거되지 않습니다.

 

---

immediate 즉시 실행

 

immediate 옵션을 사용하여 최초에 즉시실행 할 수 있다.

watch는 감시하고 싶은 값이 바뀌어야 실행됨.

근데 값이 바뀌지 않아도, 맨 처음 값을 가지고 있는 message를 기준으로

reverseMessage가 출력되게 하고싶음. 그럴때 immediate를 사용함.

 

또는 함수를 외부에 선언하여 즉시실행 할 수 있음. (Watch Effect로 하면 더 단순화 할 수 있음)

---

 

Computed vs Watch 공식문서

 

Computed와 watch 둘 다 비슷한 역할을 하고 있습니다.

 

computed

watch

 

하지만 용도는 다르다.

 

• computed
  • Vue 인스턴스의 상태 (ref, reactive 변수)의 종속 관계를 자동으로 세팅하고자 할 떄는 computed로 구현하는게 좋다. 위 예시 처럼 reverseMessage는 Message 값에 따라 결정되어지는 종속관계다.
    이 종속관계 코드가 복잡해지면 watch로 구현할 경우 더 복잡해지거나 중복계산 또는 오류가 있다. 
• watch
  • Vue 인스턴스 상태 (ref, reactive 변수)의 변경 시점에 특정 액션 (call api, push route 등)을 취하고자 할때 적합하다.
  • 대개의 경우 computed로 구현 가능한 것이라면 watch가 아니라 computed 로 구현하는게 대부분 옳다

---

WatchEffect

 

watchEffect는 콜백함수 안의 반응성 데이터에 변화가 감지되면 자동으로 반응하여 실행합니다.

그리고 watchEffect의 코드는 watch와 달리 컴포넌트가 생성될 때 즉시 실행됩니다.

watch와 달리 감시할 데이터를 가져오지 않고 save() 함수만 넣어놔도, 

함수 안에 있는 title, contents 데이터를 감시해서 값이 Update되면 바로 save() 함수 실행함

---

watch vs watchEffect 

 

watch와 watchEffect 둘 다 관련 작업 (api call, push route 등)을 반응적으로 수행할 수 있게 해줍니다.

하지만 주요한 차이점은 관련된 반응형 데이터를 추적하는 방식입니다.

 

• watch 어떤 데이터를 감시하겠다고 명시적으로 표시한 소스만 추적합니다. 콜백 내에서 액세스한 항목은 추적하지 않습니다. 또한 콜백은 소스가 실제로 변경된 경우에만 트리거 됩니다. watch 종속성 추적을 부작용과 분리하여 콜백이 실행되어야 하는 시기를 보다 정확하게 제어할 수 있습니다.
• watchEffect 콜백 함수 안에 있는 반응형 데이터를 감시하기 때문에 watch 보다 덜 명시적입니다. 반면에 종속성 추적과 부작용을 한 단계로 결합합니다. 동기 실행중에 액세스 되는 모든 반응 속성을 자동으로 추척합니다. 이것은 더 편리하고 일반적으로 더 간결한 코드를 생성하지만 반응성 종속성을 덜 명시적으로 만듭니다.