[Vue] Vue에서 데이터 변경 감시하는 방법(feat. watch)

 

안녕하세요. 혀코입니다.

 

이번 시간에는 Vue에서 데이터 변경 감시하는 방법에 대해서 알아보겠습니다.

 

다음은 message를 Hello World! 에서 Smile World!로 바꾸는 코드입니다.

 

<template>
  <h1>Watch Message</h1>
  <p>{{ message }}</p>
  <button @click="change">Change</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    change() {
      return this.message = 'Smile World!'
    }
  }
}
</script>

 

여기서 변경되는 데이터를 감시하려면, watch property를 사용해야 합니다.

 

<template>
  <h1>Watch Message</h1>
  <p>{{ message }}</p>
  <button @click="change">Change</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  watch: {
    message() {
      console.log('message: ', this.message)
    }
  },
  methods: {
    change() {
      return this.message = 'Smile World!'
    }
  }
}
</script>

 

watch property를 추가하고, 감시할 데이터 message에 함수를 실행하는 형식으로 적어주는데 message: function() 을 줄여 message() 로 적고, message의 데이터 값을 console.log을 사용해서 출력해 주면 됩니다.

 

이때, watch의 매개변수를 value로 해서 넘겨주면, 변경된 데이터인 this.message 대신에 value를 출력할 수 있다. 동일한 값을 출력해줍니다.

 

<template>
  <h1>Watch Message</h1>
  <p>{{ message }}</p>
  <button @click="change">Change</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  watch: {
    message(value) {
      console.log('message: ', value)
    }
  },
  methods: {
    change() {
      return this.message = 'Smile World!'
    }
  }
}
</script>

 

 

이렇게 Vue에서 데이터 변경 감시하는 방법에 대해서 알아봤습니다.

 

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

 

감사합니다. :)