[Vue.js] watch 와 watchEffect

📌watch

🌟 source가 변경되면 콜백함수를 실행한다.

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

1️⃣ 첫번째 인자 : 감시하려는 소스

① ref- ref를 사용하는 반응형 데이터

② reactive- reactive의 getter함수를 사용하는 반응형 객체의 속성

③ 다중 소스

2️⃣ 두번째 인자 : 콜백함수로 감시하려는 source가 변경될 때마다 실행

① 콜백함수의 첫번째 인자: 변경 이후의 값

② 콜백함수의 두번째 인자: 변경 이전의 값

③ 콜백함수의 세번째 인자(선택사항): onInvalidate, 필요할 때 작업을 정리하거나 취소하는 등 부작용을 관리

• ref 객체나 배열 조합시에는 반드시 { deep: true } 옵션이 필수

1. ref

<script setup>
import { ref, watch } from 'vue';

const counter = ref(0);
const smile = ref('😀');

watch(counter, (newCount, oldCount) => {
  console.log(`Counter: ${counter.value} (from ${oldCount} to ${newCount} ${smile.value})`);
});
</script>

<template>
  <div>
    <h1>Counter: {{ counter }}</h1>
    <button @click="counter++">Increment</button>
  </div>
</template>

ref는 반응성을 가진 상태 데이터를 생성할 때, 반응 객체 데이터를 래핑하기 때문에 실제 데이터에 접근하려면 .value 속성을 사용해야 한다.

그러나 watch 함수의 두번째 인자인 콜백함수의 newValue, oldValue는 객체가 아닌 ref.value 에 해당하는 값이다. 그래서 감시대상이 Ref를 이용해서 만든 반응성을 가진 데이터 객체라도 newValue, oldValue는 .value 속성을 사용하지 않는다.

2. reactive

const cart = reactive({
  item: 'Pencil',
  count: 0
});

❓ cart의 count값이 변경될 때마다 감시하고 싶다면 watch의 첫번째 인자로 무엇을 사용해야 할까?

reactive로 만든 반응형 객체의 특정 속성의 변경사항을 감시하려면 watch의 첫번째인자로 getter 함수를 사용하면된다. getter함수를 쓰면 (selector처럼) 원하는 속성의 변경사항만 감지해서 콜백함수를 실행할 수 있다.

import { reactive, watch } from 'vue';

const cart = reactive({
  item: 'Pencil',
  count: 0
});

watch(**() => cart.count**, (newCount, oldCount) => {
  console.log(`Total Item: ${cart.count} (from ${oldCount} to ${newCount})`);
});

</script>

<template>
  <div>
    <p>Item: {{ cart.item }}</p>
    <p>Count: {{ cart.count }}</p>
    <button @click="cart.count++">Increase</button>
  </div>
</template>

watch가 cart.count 의 변경사항을 감지하게 되면, count 의 변경전, 후 값을 콜백함수에 전달해준다.

(count는 reactive객체의 속성이므로 value가 없다.

watch 내부에서 cart.count, oldCount, newCount등 여러개의 변수를 활용할 수 있으므로 value라는 이름보다는 old**Count 처럼 명확히 네이밍하는게 중요하다는 생각이 든다!**

3. 다중감시자

여러개의 값을 감시하다가 하나의 핸들러를 실행하고 싶을 때

watch함수의 인자로 여러개의 값을 줄때는 배열로 감싼다.

<script setup>
import { ref, reactive, watch } from 'vue';

const temperature = ref(25);
const humidity = ref(50);
const finedust = reactive({
  quality: 'Good'
});

watch(
  [temperature, humidity, () => finedust.quality],
  ([newTemperature, newHumidity, newFinedust], [oldTemperature, oldHumidity, oldFinedust]) => {
    console.log(`Temperature: ${temperature.value} (from ${oldTemperature}°C to ${newTemperature}°C)`);
    console.log(`Humidity: ${humidity.value} (from ${oldHumidity}% to ${newHumidity}%)`);
    console.log(`finedust: ${finedust.quality} (from ${oldFinedust} to ${newFinedust})`);
  }
);

function showYesterday(temp, humid, quality) {
  temperature.value += temp;
  humidity.value += humid;
  finedust.quality = quality;
}
</script>

<template>
  <div>
    <h1>Weather</h1>
    <p>Temperature: {{ temperature }}°C</p>
    <p>Humidity: {{ humidity }}%</p>
    <p> Quality: {{ finedust.quality }}</p>
    <button @click="showYesterday(3, 5, 'Bad')">Show Yesterday</button>
  </div>
</template>

source

온도와 습도는 ref로 관리하고 미세먼지는 reactive로 관리하고있다.

watch함수의 첫번째 인자에는 source값을 배열로 묶어서 넣을수 있고, reactive 반응성 객체는 getter함수로 원하는 값는 특정하여 넣는다.

watch(
  [temperature, humidity, () => finedust.quality]

콜백함수

콜백함수의 각 인자에는 각 source들의 변경전, 후 값들을 배열로 묶어서 넣는다.

([newTemperature, newHumidity, newFinedust],
 [oldTemperature, oldHumidity, oldFinedust]) => { ... }

🚀 deep/ immediate option

Deep

💡 지정한 속성의 속성값도 감시한다.

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

즉, 속성 뿐 아니라 중첩된 속성에도 트리거된다.

const person = reactive({
  name: '홍길동',
  age: 30,
  hobby: '운동',
  obj: {
    count: 0,
  },
});

• getter함수로 객체obj 의 값을 넘길 경우 obj 의 값이 바뀔경우에만 트리거된다.
  • ex) obj: "Hello!" 로 obj가 변경됐을 경우에만 동작.
  • count가 바뀌어도 watch의 콜백함수가 실행되지 않는다.

watch(
	() => person.obj,
	(newValue) => {
		// 객체의 값이 바뀔 경우에만 트리거 된다.
	}
);

• deep 옵션을 사용하면 깊은 감시자로 강제할 수 있다.

watch(
  () => person.obj,
  (newValue) => {
    console.log('newValue: ', newValue);
  },
  { deep: true } //마지막 매개변수
);

🚨 deep 옵션을 큰 데이터 구조에서 사용시 비용이 많이 들 수 있으므로, 필요한 경우에만 사용학 성능 영향에 주의하자.

---

immediate

💡 최초에 즉시 실행되도록하는 옵션

watch는 반응형 데이터를 감시하다가, 반응형 데이터의 ‘변화’가 일어났을 때 최초로 실행된다.

immediate 옵션을 사용하면 최초에 페이지를 읽었을 때 즉시실행되도록 할 수 있다.

watch(
  () => person.obj,
  (newObj) => {
    console.log('newCount: ', newObj.count);
  },
  { immediate: true },
);

---

computed와 watch의 비교 및 사용사례

computed()는 결과값을 반환하지만, watch()는반응형 데이터를 변경했을 때 특정 동작을 실행

computed → vue 인스턴스의 상태(ref, reactive 변수)에 종속관계를 세팅할 때.
ex)  reverseMessage는 message 값에 따라 결정되어지는 종속관계에 있다

watch → vue 인스턴스의 상태(ref, reactive 변수)변경시점에 특정 Action( api 호출, route push 등)을 취할 때

---

📌watchEffect

1️⃣ 컴포넌트가 생성될 때, 2️⃣콜백함수 내부의 반응성 데이터에 변화가 감지될때, 자동으로 실행한다.

const message = ref('');

watchEffect(()=> {
	console.log(message.value);
})

message 가 변경될 때마다 콘솔이 출력된다.

콜백 함수 안의 반응형 데이터가 변경되면 자동으로 감지하여 실행

사용예시

✏️ 자동저장 기능을 만들때

save() 로 저장함수를 만들어 놓고, 이와 같이 watchEffect를 사용할 수 있다.

const message = ref('');

watchEffect(()=> {
	save(message.value);
})

위와 같이 코드를 작성하면, 내용이 수정될때마다 자동으로 저장함수 save()가 실행된다.

TIP! 바인딩된v-model에 .lazy 옵션을 준다면 포커스가 이동되었을때 저장하는 방식으로도 변경할 수 있을 것이다.