Vue.js, watch() 메소드, 사용법

watch() 메소드란?

Vue의 watch() 메소드는 특정 반응형 데이터(ref, reactive 등)의 변화를 감지하고, 값이 변경될 때 실행할 콜백 함수를 정의하는 데 사용된다.

watch() 사용 방법

1. watch(감시할 변수, (새 값, 이전 값) => { 실행할 로직 })
2. 여러 개의 변수를 감시할 수도 있음.
3. ref, reactive 데이터에서 사용 가능.

1. 사용법

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

const count = ref(0);
//ref객체

const page = reactive({
  total: 0,
  current: 1
})//reactive 객체

watch(count, (newVal, oldVal) => {
  console.log(`count가 ${oldVal} -> ${newVal} 로 변경됨`);
});

watch(() => count.value, (newVal, oldVal) => {
  console.log(`count가 ${oldVal} -> ${newVal} 로 변경됨`);
});

// 이렇게 해야 동작함
watch(() => page.current, (newVal) => {
  console.log(`현재 페이지: ${newVal}`);
});

// 이렇게 page내 어떤 속성이 변해도 동작함
watch(page, (newVal) => {
  console.log(`현재 페이지: ${newVal}`);
}, { deep : true});

</script>

• ref는 watch()에서 바로 감시할 수 있음
• ref는 내부적으로 .value를 감지하도록 Vue가 알아서 처리해 줌.
• reactive 객체의 속성은 Vue가 직접 감지하지 못함.
• 그래서 () => page.current처럼 getter 함수를 넘겨줘야 함.
• page.current.value는 아예 존재하지 않는다
• 만약 그냥 page 객체안에 어느 성이 변해도  감지하고 싶다면 {deep : true} 속성을 넣어준다