감시자 속성 (Watchers)

Vue.js에서 감시자 (Watcher) 는 데이터가 변경될 때 반응적으로 특정 로직을 실행할 수 있는 방법입니다.
주로 data 속성이나 computed 속성의 변화를 감지하고, 해당 데이터가 변할 때 자동으로 특정 작업을 수행하는 데 사용됩니다.

• watchedProperty: 감시할 데이터 속성
• newVal: 속성의 변경 후 값.
• oldVal: 속성의 변경 전 값.

<script>
export default {
  data() {
    return {
      age: 25,
    };
  },
  watch: {
    age(newVal, oldVal) {
      console.log(`Age changed from ${oldVal} to ${newVal}`);
    },
  },
};
</script>

깊은 감시 (Deep Watch)

기본적으로 watch는 기본 자료형의 변경만 감지합니다.
만약 객체나 배열처럼 참조 자료형의 내부 값 변화를 감지하려면, 깊은 감시(deep: true)를 사용해야 합니다.

watch: {
  'watchedProperty': {
    handler(newValue, oldValue) {
      // 객체나 배열 내부 값이 변할 때마다 실행
    },
    deep: true // 깊은 감시 설정
  }
}

ex

<template>
  <div>
    <button @click="changeObject">Change Object</button>
    <p>{{ userInfo }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: { name: 'John', age: 25 }
    };
  },
  watch: {
    userInfo: {
      handler(newVal, oldVal) {
        console.log('userInfo changed:', oldVal, '->', newVal);
      },
      deep: true
    }
  },
  methods: {
    changeObject() {
      this.userInfo.name = 'Jane'; // name만 변경
    }
  }
};
</script>

userInfo 객체가 깊은 감시를 받기 때문에, 객체의 내부 속성이 변할 때마다 handler가 호출됩니다.

immediate: 감시자 생성 시 즉시 콜백 트리거. 첫 호출 시 이전 값은 undefined.
immediate: true를 사용하면 초기화 시점에도 watch 콜백을 즉시 실행할 수 있습니다. 기본적으로 watch는 데이터가 변경된 후에만 호출됩니다. 그러나 immediate를 설정하면 컴포넌트가 생성될 때에도 콜백이 실행됩니다.

watch: {
  counter: {
    handler(newVal, oldVal) {
      console.log(`Counter changed: ${oldVal} -> ${newVal}`);
    },
    immediate: true // 컴포넌트 생성 시점에도 호출
  }
}