Vue.js는 양방향 데이터 바인딩을 지원하여 데이터의 변화를 실시간으로 감지하고 반영할 수 있습니다. 이를 통해 애플리케이션의 사용자 인터페이스를 업데이트하거나 필요한 로직을 실행할 수 있습니다.

<template>
  <div>
    <input v-model="message" type="text" placeholder="메시지를 입력하세요" />
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      reversedMessage: ''
    };
  },
  watch: {
    message(newValue) {
      this.reversedMessage = this.reverseText(newValue);
    }
  },
  methods: {
    reverseText(text) {
      return text.split('').reverse().join('');
    }
  }
};
</script>

위의 코드 예제에서는 v-model 디렉티브를 사용하여 <input> 요소와 message 데이터 속성을 양방향으로 바인딩합니다. 사용자가 입력하는 메시지는 자동으로 message 속성에 반영되고, message 속성의 변경은 watch 속성에서 감지됩니다.

watch 속성은 message 속성의 변경을 감지하는 함수를 정의합니다. 이 함수는 newValue라는 매개변수를 받아와서 변경된 값을 이용해 다른 데이터나 로직을 처리합니다. 예제에서는 reverseText 메서드를 호출하여 message 값을 역순으로 변환하여 reversedMessage 속성에 저장합니다.

이렇게 watch 속성을 활용하면 상태 변화를 실시간으로 감지하고 필요한 로직을 자동으로 실행할 수 있습니다. Vue.js의 양방향 데이터 바인딩과 watch 속성의 조합을 통해 Vue.js 애플리케이션을 더 유연하고 반응적으로 만들 수 있습니다.

#Vue.js #TwoWayDataBinding