wathcer (vue.js)

 

watch는 단순히 데이터 변경에 반응하기 보다 일반적인 방법을 제공한다. 

watch는 변경이 일어났을 때 특정행위를 할 수 있도록 해준다. 

 

언제 사용하는지?

- 속성이 변경됨을 감시하고 퍼포먼스를 구현하려고 할 때

- API통신 responce에 대해 사용 (데이터를 바로바로 감시)

watch(newValue, oldValue){}
- 첫번째 인자: 바뀐 값
- 두 번째 인자: 바뀌기 전 값

 

<template>
  <h2>Volume Tracker (0-20)</h2>
  <h3>Current Volume - {{ volume }}</h3>
  <div>
    <button @click="volume += 2">Increase</button>
    <button @click="volume -= 2">Decrease</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      volume: 0,
    };
  },
  computed: {},
  methods: {},
  watch: {
    volume(newValue, oldValue) {
      if (newValue > oldValue && newValue === 16) {
        alert("볼륨이 16이상입니다.");
      }
      // 볼륨이 increase일때만 얼럿이 활성화 되도록
    },
  },
};
</script>

 

 

 

data가 object형태 일 때

1. 기존 volume 함수를 객체형태로 바꿈

2. handle함수 생성 

3. deep: true

<template>
  <h2>Volume Tracker (0-20)</h2>
  <h3>Current Volume - {{ volume }}</h3>
  <div>
    <button @click="volume.num1 += 100">Increase</button>
    <button @click="volume.num1 -= 50">Decrease</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      volume: {
        num1: 10,
        num2: 20,
        num3: 30,
      },
    };
  },
  computed: {},
  methods: {},
  watch: {
    volume: {
      handler(newValue, oldValue) {
        console.log("newValue: ", newValue);
        console.log("oldValue: ", oldValue);
      },
      deep: true,
    },
  },
};
</script>

 

 

data가 배열일 때 watch 사용법

참조를 반환하려면 마찬가지로 deep: true로 설정해준다. 

<template>
  <h2>{{ heros }}</h2>
  <button @click="heros.push('antman')">add hero</button>
</template>

<script>
export default {
  data() {
    return {
      heros: ["batman", "superman"],
    };
  },
  watch: {
    heros: {
      handler(newValue) {
        console.log(`update list ${newValue}`);
      },
      deep: true,
    },
  },
};
</script>

 

하지만 새 참조를 반환하는 경우 deep속성이 필요없다. 

<template>
  <button @click="heros = heros.concat(['antman'])">add hero</button>
</template>

<script>
export default {
  data() {
    return {
      heros: ["batman", "superman"],
    };
 },
  watch: {
    heros: {
      handler(newValue) {
        console.log(`update list ${newValue}`);
      },
    },
  },
};
</script>

 

 

 

렌더링 후 즉시 watch 시키기

 

watch는 기본적으로 데이터의 값이 들어있는 상태에서는 발동하지 않는다. 

값이 들어오거나 변경되었을 때 watch를 발동시키는데, 만일 최초 렌더링 시에도 watch를 이용하고 싶을 때는

immediate를 true로 설정한다. 

<template>
  <h2>{{ name }}</h2>
  <input type="text" v-model="name" />
</template>

<script>
export default {
  data() {
    return {
      name: "망고",
    };
  },
  computed: {},
  methods: {},
  watch: {
    name: {
      handler(newValue, oldValue) {
        console.log("newValue: ", newValue);
      },
      immediate: true,
    },
  },
};
</script>

렌더링 후 바로 '망고'가 콘솔에 찍히는것을 확인할 수 있다.