Vue computed와 watch

computed

- computed는 데이터 값에 변경이 일어나는지 감시한다.

- firstName과 lastName 값 중 하나라도 변경되면 fullName 함수가 자동으로 실행됨.

- 인스턴스의 data에 할당된 값들 사이의 종속관계를 자동으로 세팅하고자 할때는 computed로 구현하는것이 좋다.

// /views/computed
<template>
  <h1>Full Name : {{ fullName }}</h1>
</template>
<script>
export default {
  data() {
    return {
      firstName: "KyungJoon",
      lastName: "Park",
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

watch

- computed의 경우 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 사용이 된다면, watch는 watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용.

- watch는 computed와 달리 실제 데이터 변경이 일어나기 전까지는 실행되지 않는다.

- watch는 특정 프로퍼티의 변경시점에 특정 액션(call api, push route …)을 취하고자 할때 적합하다.

// /views/watch2
<template>
  <div>
    <h1>Full Name : {{ fullName }}</h1>
    <button type="button" @click="changeName">변경</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "Kyungjoon",
      lastName: "Park",
      fullName: "",
    };
  },
  watch: {
    // firstName() {
    //   this.fullName = this.firstName + " " + this.lastName;
    // },
    firstName: function (firstName, oldFirstName) {
      this.fullName = firstName + " " + this.lastName;
    },
    lastName() {
      this.fullName = this.firstName + " " + this.lastName;
    },
  },
  methods: {
    changeName() {
      this.firstName = "Kyong";
    },
  },
};
</script>