watch 속성은 반응형 데이터의 변화를 감지하고 특정 로직을 실행하고 싶을 때 사용한다. 쉽게 말해, 데이터가 변하면 "이 일을 해라"라고 정의하는 기능이다.
1. watch의 기본 개념
- Vue 컴포넌트의 반응형 데이터가 변경될 때 특정 작업을 수행하고 싶을 때 사용.
- 예를 들어, 사용자가 입력한 값에 따라 다른 작업을 실행하거나, 데이터를 서버로 전송해야 할 때 유용.
2. 기본 사용법
<script>
import { ref, watch } from 'vue';
// 반응형 데이터 정의
const count = ref(0);
// 데이터 변화를 감지
watch(count, (newValue, oldValue) => {
console.log(`count가 ${oldValue}에서 ${newValue}로 변경되었습니다.`);
});
</script>
<template>
<button @click="count++">count 증가</button>
<p>현재 count: {{ count }}</p>
</template>설명
count라는 반응형 데이터를 선언.watch를 사용해count의 변화를 감지.- 값이 변경되면
watch안의 콜백 함수가 실행.
3. 주요 개념
(1) 감지할 대상
- 단일 데이터:
ref,reactive에서 특정 값을 감지. - 여러 데이터: 배열로 감지 가능.
- 특정 함수: 계산된 값이나 데이터 변화를 계산하는 함수.
(2) 콜백 함수 인자
- newValue: 변경된 값.
- oldValue: 변경되기 이전 값.
(3) 옵션
immediate: 초기 상태에서 콜백을 바로 실행.deep: 객체 내부 속성까지 깊게 감지.
4. 여러 데이터 감지
여러 데이터를 감지하려면 배열 형태로 전달.
<script>
import { ref, watch } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
console.log(`이름이 ${oldFirstName} ${oldLastName}에서 ${newFirstName} ${newLastName}로 변경되었습니다.`);
});
</script>
5. deep 옵션
객체 내부의 속성 변화를 감지하려면 deep: true를 사용.
<script>
import { reactive, watch } from 'vue';
const user = reactive({ name: 'John', age: 30 });
watch(
user,
(newValue, oldValue) => {
console.log('user 객체가 변경되었습니다.', newValue, oldValue);
},
{ deep: true }
);
</script>Vue 3에서 객체 내부 특정 속성의 변화를 감지하려면, 객체의 특정 속성을 직접 참조하거나 감지 대상에 해당 속성만 지정한다.
1. 객체 속성을 직접 지정하기
객체 내부의 특정 속성을 직접 참조하면, 해당 속성의 변화만 감지할 수 있음.
vue
코드 복사
<script setup>
import { reactive, watch } from 'vue';
const user = reactive({ name: 'John', age: 30 });
// 특정 속성만 감지
watch(
() => user.name, // user 객체의 name 속성만 감지
(newValue, oldValue) => {
console.log(`name이 ${oldValue}에서 ${newValue}로 변경되었습니다.`);
}
);
</script>
설명
watch의 첫 번째 인자로 getter 함수를 사용.() => user.name을 지정하면user.name속성의 변화만 감지.
2. deep 없이 특정 속성 감지하기
deep 옵션 없이도 특정 속성을 명시.
<script setup>
import { reactive, watch } from 'vue';
const user = reactive({ name: 'John', age: 30 });
// 특정 속성만 명시적으로 감지
watch(
() => ({ name: user.name }), // 객체로 감싸서 전달 가능
(newValue, oldValue) => {
console.log(`name 속성 변경: ${oldValue.name} -> ${newValue.name}`);
}
);
</script>3. 다중 속성 감지
객체의 여러 속성을 동시에 감지하고 싶을 때는 배열로 지정합니다.
<script setup>
import { reactive, watch } from 'vue';
const user = reactive({ name: 'John', age: 30 });
watch(
[() => user.name, () => user.age], // 여러 속성 감지
([newName, newAge], [oldName, oldAge]) => {
console.log(`name: ${oldName} -> ${newName}, age: ${oldAge} -> ${newAge}`);
}
);
</script>4. 객체의 특정 속성 변화를 포함한 전체 감지
만약 특정 속성을 감지하되, 객체 전체 변화도 알고 싶다면 deep: true를 사용하고 로직 내부에서 조건을 추가할 수 있습니다.
<script setup>
import { reactive, watch } from 'vue';
const user = reactive({ name: 'John', age: 30 });
watch(
user,
(newValue, oldValue) => {
if (newValue.name !== oldValue.name) {
console.log(`name이 ${oldValue.name}에서 ${newValue.name}로 변경되었습니다.`);
}
},
{ deep: true } // 객체의 모든 속성을 감지
);
</script>요약
- 특정 속성 감지:
() => 객체.속성형태로 지정. - 여러 속성 감지:
watch([getter1, getter2], callback)사용. - 조건 추가:
deep: true와 조건문 조합.
6. immediate 옵션
immediate: true를 사용하면 데이터 변화와 상관없이 처음에 한 번 실행.
vue
코드 복사
<script setup>
import { ref, watch } from 'vue';
const message = ref('Hello');
watch(
message,
(newValue) => {
console.log(`message: ${newValue}`);
},
{ immediate: true }
);
</script>
7. 주의점
- 너무 많은
watch를 사용하면 성능 문제가 발생할 수 있으므로 필요한 경우에만 사용. - 반응형 데이터 외의 일반 데이터는 감지되지 않음.
정리
- 언제 사용하나요?
- 데이터가 변경될 때마다 추가 작업이 필요할 때.
- 주요 포인트
watch(감지할 값, 콜백 함수, 옵션).- 옵션으로
immediate와deep을 활용.
