[Vue.js] Vue 감시자(watch) 이해와 활용하기

감시자(watch)란?

Vue.js에서 감시자(watch)는 데이터의 변화를 감지하고, 변화에 따라 특정 동작을 수행하는 기능입니다. 특정 데이터를 감시하여 데이터가 변경될 때마다 특정 동작을 수행할 수 있습니다.

예제

아래 예제에서는 사용자의 입력값을 감시하여 입력값이 변경될 때마다 해당 값을 대문자로 변환하는 감시자를 선언하는 예제를 보여줍니다.

<template>
  <div>
    <input v-model="inputValue" type="text" placeholder="입력하세요">
    <p>입력값: {{ inputValue }}</p>
    <p>대문자로 변환된 값: {{ upperCaseValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      upperCaseValue: ''
    };
  },
  watch: {
    inputValue(newValue, oldValue) {
      this.upperCaseValue = newValue.toUpperCase();
    }
  }
}
</script>

설명

• inputValue 데이터 속성은 사용자의 입력값을 저장합니다.
• upperCaseValue 데이터 속성은 감시자를 통해 대문자로 변환된 입력값을 저장합니다.
• watch 속성을 사용하여 inputValue를 감시합니다. inputValue가 변경될 때마다 콜백 함수가 실행됩니다.
• 콜백 함수에서는 새로운 값(newValue)을 대문자로 변환하여 upperCaseValue에 저장합니다.

주요 특징

• 반응성: 데이터의 변화를 실시간으로 감지하여 특정 동작을 수행합니다.
• 비동기 처리: 비동기 로직을 포함할 수 있어 데이터 변화에 따라 비동기적인 작업을 수행할 수 있습니다.