[Vue] Watch

개념

---

While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.
- vue공식문서 -

 

공식문서에 따르면 대부분 "computed 속성이 적합하지만, 사용자가 특정 지정한 값을 감시하는 경우을 위해 watch를 사용한다"라고 말한다.

다시말해, watch는 특정 대상을 감시하여, 데이터 변경이 발생한 경우 반응하는 속성이다.

 

그럼 watch는 언제 사용하나?!

1. 특정 대상의 변경이 발생한 경우 데이터 조작이 필요한 경우
2. router변화를 감지하기 위해
3. store의 state가 변경될 경우 감지하기 위해(computed와 같이 사용)

 

watch 기초

---

<template>
  <div id="app">
    <input type="text" v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  watch: {
    message: function (value) {
      console.log("value", value);
    },
  },
};
</script>

👉 <input type="text" v-model="message" />

1. 사용자가 input에 텍스트를 입력하면 data의 message에 데이터가 동적으로 바인딩이 된다.

 

👉 message: function (value) { console.log("value", value); }

1. 사용자가 input에 텍스트를 입력할때 마다 message에 데이터가 동적으로 바인딩 되고, watch는 message의 값이 변경이 발생될 때마다 watch의 message 메소드가 실행되어 console.log("value", value)가 실행 된다.
2. 주의점은 감시할 타켓명이 watch에 동일한 이름으로 사용 해야한다. data에 message를 감시할려면 watch에도 동일한 이름인 message를 key값으로 해야한다.

 

기본문법

---

watch: {
  // 문법1
  message: function (value) {
    console.log("value", value);
  },

  // 문법2
  message(value) {
    console.log("value", value);
  },

},

👉 문법1

1. watch 데이터 타입은 객체 이며, 문법1은 자바스크립트의 기본문법인 메소드를 정의하는 문법 이다.

 

👉 문법2

1. 자바스크립트 ES5문법에 따라 메소드를 단축하여 정의 할 수 있다.

 

다양한 사용법

---

new값, old값

<template>
  <div id="app">
    <input type="text" v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log("newValue", newValue);
      console.log("oldValue", oldValue);
    },
  },
};
</script>

👉 message(newValue, oldValue) { ... }

1. newValue는 현재 message에 바인딩된 값을 가지고 있다.
2. oldValue는 현재 message에 바인딩된 데이터 바로 이전의 값을 가지고 있다.

 

함수로 지정

<template>
  <div id="app">
    <input type="text" v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  watch: {
    message: "setMethod",
  },
  methods: {
    setMethod(value) {
      console.log("watch message value", value);
    },
  },
};
</script>

👉 message: "setMethod"

1. watch에 메소드로 사용해도 되지만 함수로 따로 빼서 정의 할 수 있다.
2. 함수명(setMethod)을 문자열로 정의하면 methods에 정의된 함수가 실행 된다.

 

객체 감시하기 (객체 전체)

<template>
  <div id="app">
    <input type="text" v-model="message.title" />
    <input type="text" v-model="message.contens" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: {
        title: "",
        contens: "",
      },
    };
  },
  watch: {
    message: {
      handler: function (val) {
        console.log("val", val); // {title: '', contens: '변경'}
      },
      deep: true,
    },
  },
};
</script>

👉 message: { handler: function () { ... }, deep: true }

1. message객체에 title, contens 중 한개라도 변화가 감지되면 watch에 message가 실행 된다.
2. handler, deep은 객체 전체를 watch하기 위한 문법 이다.

 

객체 감시하기 (개별)

<template>
  <div id="app">
    <input type="text" v-model="message.title" />
    <input type="text" v-model="message.contens" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: {
        title: "",
        contens: "",
      },
    };
  },
  watch: {
    "message.title": function (val) {
      console.log("val", val);
    },
    "message.contents": function (val) {
       console.log("val", val);
     }
  },
};

 

Reference

---

1. https://v3.ko.vuejs.org/guide/computed.html
2. https://kr.vuejs.org/v2/api/
3. https://runebook.dev/ko/docs/vue/api/instance-methods