[Vue] Watch 속성 정리

⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️

1. Watch 속성

 

---

 

Watch 속성

데이터가 변경되는 것을 감시해서 로직처리를 하고 싶을때 watch 옵션을 사용한다. 즉 watch란 데이터의 변경사항을 감시하는 옵션이다.

data() {
  return {
    데이터이름: '데이터내용',
  };
},
watch: {
  // 감시하고 싶은 데이터를 메서드로 만들어준다
  데이터이름(value) {
    // 데이터가 변경되었을때 처리할 로직
    console.log(this.데이터이름);
    // this.데이터이름 대신 첫번째 파라미터로 접근할 수도 있다
    console.log(value);
  }
}

 

예제

watch 옵션 안에 있는 msg 메서드는 msg 데이터가 업데이트하면 해당 로직이 실행되고 reversedMessage 메서드는  reversedMessage 데이터가 업데이트하면 해당 로직이 실행된다.

<template>
  <p @click="changeMessage">{{ msg }}</p>
  <p>{{ reversedMessage }}</p>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello?',
    };
  },
  computed: {
    reversedMessage() {
      return this.msg.split('').reverse().join('');
    },
  },
  watch: {
    msg(value) {
      console.log('msg: ', this.msg);
      console.log('msg: ', value);
    },
    reversedMessage(value) {
      console.log('reversedMessage: ', this.reversedMessage);
      console.log('reversedMessage: ', value);
    },
  },
  methods: {
    changeMessage() {
      this.msg = 'Bye!';
    },
  },
};
</script>