[Vue] Watch

<template>
  <div>
    <h1>watchers</h1>
    <h1>current money :: {{ money }}</h1>
    <div>
      <button @click="money += 100">earn money</button>
      <button @click="money -= 100">spend money</button>
    </div>
    <h3>{{ receipt }}</h3>
    <button @click="receipt.food += 500">buy food</button>
    <hr />
    <input type="text" v-model="userName" />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      userName: "scalper",
      money: 0,
      receipt: {
        food: 3000,
        fee: 2000,
        fare: 10000,
      },
    };
  },
  watch: {
    //오브젝트의 경우 다르게 해야함
    // receipt(newValue, oldValue) {
    //   console.log("영수증에 값 변화가 있음", newValue, oldValue);
    // },
    userName: {
      handler(newValue) {
        console.log(newValue, "newValue");
      },
      immediate: true,
    },

    receipt: {
      handler(newValue) {
        console.log("영수증에 값 변화", newValue);
      },
      deep: true,
    },
    money(newValue, oldValue) {
      console.log(oldValue);
      if (newValue > 2000 && newValue > oldValue) {
        console.log("mission complete");
      }

      if (oldValue < 1500 && newValue < oldValue) {
        console.log("save money!");
      }
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}

label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 1 rem;
}

div {
  margin-bottom: 1rem;
}
</style>

watch는 값의 변화를 추적할 수 있다.