[Vue] watch 속성과 옵션

베하! 여러분 오랜만에 Vue에 대해 알려드릴 일단고팀입니다!

 

Vue 중에서 오늘 알려드릴 키워드는 바로~~ watch 오브젝트입니다!!

 

Watch 속성

watch는 데이터의 변경을 감지해서 원하는 로직을 처리하기에 알맞은 속성입니다. 즉, 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용한 속성이 watch입니다.

 

예시를 들어보겠습니다.

<template>
<div id="watch-example">
  <p>
    yes/no 질문을 물어보세요:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
</template>

<script>
  data: {
    question: '',
    answer: '질문을 하기 전까지는 대답할 수 없습니다.'
  },
  watch: {
    question: function (newQuestion) {
      this.answer = '입력을 기다리는 중...'
    }
  },
</script>

위 예시는 question이라는 데이터를 입력할 수 있는 input칸이 있고, 해당 input칸에 무언가 작성하면 answer에 ‘입력을 기다리는 중…’ 이라는 값이 들어가게 작성한 예시입니다.

 

이러한 watch 속성에는 옵션도 존재합니다.

 

 

옵션 1 - deep

우선, deep옵션 입니다. deep옵션이 붙지 않으면 지정한 속성 값의 변화만 파악하는 반면, deep 옵션이 붙으면 지정한 속성안에 있는 속성의 값, 안에 삽인된 속성의 값까지 감시하여 로직을 처리합니다.

예시입니다.

var app = new Vue({
  el:"#app",
  data:{
    user: {
      name: 'Steve',
      age: '28',
      homeTown: '서울' 
    }
  },
  watch:{
    user: {
      handler( newVal, oldVal ){
        console.log( 'newVal:', newVal, 'oldVal:', oldVal )
      },
      deep: true
    }
  }
})

위 예시는 watch 속성으로 user를 바라보고 있지만 deep 옵션을 사용했기 때문에 user 속의 name의 값이 바뀌어도 handler가 동작하게 됩니다.

 

 

옵션 2 - immediate

두번째로 immediate 옵션입니다. immediate 옵션이 붙지않으면 페이지를 읽어들이는 시점에는 로직이 실행되지 않고 변화가 생겼을 때 실행됩니다. 하지만 immediate를 쓴다면 처음 페이지를 created 될 때 지정한 로직을 실행시킬 수 있습니다.

예시입니다.

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

<script>
  data() {
    return {
      counter: 0
    };
  },
  watch: {
    counter: {
      immediate: true,
      handler(newValue) {
        console.log(`Counter changed: ${newValue}`);
      }
    }
  },
  methods: {
    increment() {
      this.counter++;
    }
  }
</script>

위 예시처럼 immediate: true이면 초기값 0 에 대해서도 handler가 동작하게 됩니다.

 

handler

여기서 하나 더 알 수 있는 점이 있습니다!

이러한 deep과 immediate 옵션을 쓸 때 필요한 오브젝트가 handler입니다.

handler는 처리가 어디에 있는지를 표시하기 위해서 지정하는 메소드명으로 볼 수 있습니다.

---

자 이렇게 간단하지만 유용한 vue의 watch 속성에 대해 알아보았습니다.

그럼 즐거운 코딩하세요~~

다음 시간에 만나요 안녕!