반응형 상태가 변경되었을 때 DOM을 변경하거나

비동기 작업을 해서 다른 상태를 변경해야할때…

이럴 때 compostion API 에 watch를 사용하면 반응할 수 있음.

1. 감지할 데이터
2. call back 함수
3. new Value 변경될 값, old Value 이전 값

<template>
	<div></div>
</template>

<script>
import { ref, watch } from 'vue';
export default {
	setup() {
		const message = ref('');

		watch(message, (newValue, oldValue) => {
			console.log(newValue);
			console.log(oldValue);
		});
		return { message };
	},
};
</script>

<style lang="scss" scoped></style>

위와 같이 사용했을 때 message를 수정하면

이전 값과 변화된 값을 같이 console에 찍어준다.

그래서 이 반응형을 가지고 여러갸지 조작을 해주면 되겠다.

ref 로 생성한 반응형 상태 뿐 아니라 reactive 로 한 것들 computed로 한 것들

뭐 다양한 애들을 사용할 수 있다.

watch([x, y], ([newX, newY]) => {
  console.log(newX, newY);
});

위와 같이 사용하면 x,y의 변화를 배열로 받아볼 수 있고

watch(() => {
	x.value + y.value,
		sum => {
			console.log('sum : ', sum);
		};
});

위와 같이 사용하면 x.value+y.value의 합을 변화로 받아볼 수 있다.

const obj = reactive({
  count: 0,
});

watch(obj, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});

이런식으로 해서 obj 의 모든 요소들을 다 감지할 수 있다

그러나 특정 obj의 속성을 감지할 수는 없다.

하고 싶다면 getter 함수를 사용하여

watch(()=>obj.count, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});

이렇게 사용하면 obj의 count 속성만 감지할 수 있다.

그리고 oldValue를 출력을 해보면

newValue랑 같이 찍힌다.

obj의 경우에는 같은 애를 가져오기 때문에

반응형 객체를 직접 watch 하게 되면

암시적으로 깊은 감시자가 생성이 됨.

속성의 속성 중첩된 감시까지 가능하다.

깊은 객체도 다 감시가 된다는 뜻.

immediate

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

위와 같이 사용하면 즉시 실행한다.

Computed vs watch

비슷하지만 용도가 다르다

computed는 반응형 데이터의 종속관계는 자동으로 세팅할 때

message 같은 애들

watch는 뭔가 로직을 수행할 때

WatchEffect

callback 함수 안에 반응형 데이터의 변화가 감지되면 자동으로 실행 됨.

<template>
	<div>
		<form action="">
			<input v-model.lazy="title" type="text" placeholder="Title" />
			<textarea v-model.lazy="contents" placeholder="Contents"></textarea>
		</form>
	</div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
	setup() {
		const title = ref('');
		const contents = ref('');

		const save = (title, contents) => {
			console.log(`저장되었습니다. title: ${title}, contents: ${contents}`);
		};

		watchEffect(() => {
			save(title.value, contents.value);
		});

		return { title, contents };
	},
};
</script>

<style lang="scss" scoped></style>

위와 같이 사용하면

title, contents 가 수정될 때마다

저장 메세지를 띄우는 것을 볼 수 있다.

watch vs watchEffect

차이는 즉시 실행을 해준다 effect는

watch는 명시적으로 관찰함.

watchEffect 는 그 감싼 함수 안의 모든 데이터들을 다 감지해줌..

그래서 상황에 맞게 적용할 것.