14_watch,watchEffect

1. watch

반응형 상태 변경에 따라 api와 같은 작업을 수행할 때 watch로 특정작업 수행 가능함.

watch(/* Source Type */, (newValue, oldValue) => {});

const message = ref('Hello World');

// message 데이터 변경에 
watch(message, (newValue, oldValue) => {
  console.log('newValue: ', newValue);
  console.log('oldValue: ', oldValue);
	// 어떠한 작업을 수행하는 "감시자" 역할을 합니다.
});

 

watch 첫번째 매개 변수 : ref, reactive,computed, getter함수,array 등 다양한 타입 가능.

const x = ref(0)
const y = ref(0)

// single ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// array of multiple sources
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

 

반응형 객체의 속성 하나만 감시하고 싶을때는 getter 함수 사용.

const obj = reactive({ count: 0 });
watch(() => obj.count, (newValue) => {
  console.log('newValue: ', newValue);
});

 

 

2.deep option

: 반응형 객체를 watch 하면 deep watch가 생성됨. 속성 뿐 아니라 중첩된 모든 속성에도 트리거 됨

const person = reactive({
  name: '홍길동',
  age: 30,
  hobby: '운동',
  obj: {
    count: 0, // 중첩된 속성
  },
});

watch(person, (newValue) => {
  console.log('newValue: ', newValue);
});

 

getter function으로 객체를 넘기면 객체의 값이 변경될 때만 트리거 되며 중첩된 속성은 트리거 되지 않는다.

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

 

deep option을 사용하면 강제로 deep watch가능, 그러나 큰 데이터 구조에서 비용이 많이 발생하므로 필요할 때만 사용함.

watch(
  () => person.obj,
  (newValue) => {
    console.log('newValue: ', newValue);
  },
  { deep: true }
);

 

 

3. immediate 즉시 실행

값이 변경될 때가 아니라 아예 최초에 즉시실행 가능함.

const message = ref('Hello World!');
const reverseMessage = ref('');

watch(
  message,
  (newValue) => {
    reverseMessage.value = newValue.split('').reverse().join('');
  },
  {
    immediate: true,
  }
);

 

함수를 외부에 선언하여 즉시실행 가능( watchEffect로 더 단순화 할 수 있다.)

const message = ref('Hello World!');
const reverseMessage = ref('');

const reverseFn = () => {
  reverseMessage.value = message.value.split('').reverse().join('');
};

watch(message, reverseFn);
// 즉시실행
reverseFn();

 

 

4. compute와 watch

값을 변경시키는 결과는 비슷하지만 

-compute

:vue 인스턴트 상태(ref,reactive 변수)의 종속관계를 자동으로 세팅할 때 좋다.

const reverseMessage = computed(() =>
  message.value.split('').reverse().join('')
);
// reverseMessage 는 message의 값에 따라 결정되어짐 -> 이런것을 watch로 구현하면 복잡하거나 중복계산,오류발생

 

-watch 

:Vue 인스턴트 상태의 변경 시점에 특정한 동작을 수행할 때 적합함(api 불러오기, push route 등등)

watch(
  message,
  (newValue) => {
    reverseMessage.value = newValue.split('').reverse().join('');
  }
);//message가 변경되면, reverseMessage와 newValue 변경

 

 

5.watchEffect 

:콜백 함수 안의 반응성 데이터에 변화가 감지되면 자동으로 실행. 컴포넌트가 생성될 때 즉시 실행됨

watchEffect(async () => {
  const { data } =
							await axios.get(`https://reqres.in/api/users?page=${page.value}`);
  items.value = data.data;
});

 

-watch와 watchEffect

둘 다 특정한 동작을 반응적으로 수행할게 해주지만 

watch는 명시적으로 관찰된 소스만추적하며 콜백내 엑세스한 항목은 추적되지 않는다. 또 콜백소스가 실제로 변경된 경우에만 트리거.

watch종속성 추적을 부작용과 분리하여 콜백이 실행되어야 하는 시기를 좀 더 정확하게 제어가능함.

watchEffect는 동기 실행 중에 액세스 되는 모든 반응속성을 추적하여 더 편리하고 간결한 코드로 작성 가능하나 반응성 종속성을 덜 명시적으로 만든다