[Vue.js] watch 속성을 이용한 데이터 변경 감시

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  watch: {
    counter(newValue, oldValue) {
      console.log(`counter가 ${oldValue}에서 ${newValue}로 변경되었습니다.`);
    }
  },
  methods: {
    increment() {
      this.counter++;
    }
  }
};
</script>

Vue.js에서는 데이터의 변경을 감시하고 특정 동작을 수행하는 데 사용되는 watch 속성을 제공합니다. 이를 통해 데이터의 변화를 감지하여 필요한 작업을 수행할 수 있습니다.

위 예제는 watch 속성을 사용하여 counter 데이터의 변경을 감시하는 Vue 컴포넌트를 보여줍니다.

1. counter 데이터는 현재 카운터의 값을 저장합니다.
2. watch 속성에는 counter를 감시하는 함수가 정의되어 있습니다. 이 함수는 counter의 값이 변경될 때마다 호출됩니다.
3. 변경된 값과 이전 값이 인자로 전달되며, 이를 활용하여 변경된 내용을 콘솔에 출력합니다.
4. 버튼을 클릭할 때마다 increment 메소드가 호출되어 counter 값을 증가시킵니다.

watch 속성을 사용하면 데이터의 변경을 감시하고 필요한 동작을 수행할 수 있습니다. 이를 통해 데이터의 변화에 따라 다양한 작업을 처리할 수 있으며, 특히 비동기 작업이 필요한 경우에 유용하게 활용될 수 있습니다.