Vue 3.0 - Compute vs Watch 차이

📌 Computed? Watch?

Computed 사용법

<template>
  <h1> Full Name : {{ fullName }} </h1>
</template>

<script>
  export default {
    data() {
      return {
        firstName: 'SungJae',
        lastName: 'Park'
      }
    },
    computed: {
      fullName() {
        return this.firstName + '' + this.lastName;
      }
    }
  }
</script>

Computed 내에 fullName이 정의되어 있고, firstName과 lastName을 합쳐서 반환해주는 함수로 정의되어 있다. 여기서 함수 명인 fullName은 함수이자 동시에, Vue 인스턴스 데이터 키 값이다. firstName, lastName을 Vue 인스턴스의 데이터 값으로 사용하는 것과 동일한 데이터 값으로 선언되는 것이다.

Computed는 데이터 값에 변경이 일어나는지 감시한다고 했다. Computed로 정의하면 fullName 함수가 실행되어 데이터 fullName에 firstName과 lastName을 합한 값이 할당된다.

firstName 혹은 lastName 값 중 하나라도 변경이 일어나면 fullName 함수가 자동으로 실행되고, fullName 값이 경신된다. 정리해보면, computed에 정의된 fullName은 함수이자 동시에 Vue 인스턴스의 데이터이다. computed에 정의해서 사용하면 화면 내 여러 곳에서 fullName을 사용하더라도 이에 대한 연산은 한 번 밖에 일어나지 않는다.

✅ Watch

<template>
  <div>
    <h1>FullName : {{ fullName }}</h1>
    <button type="button" @click="changeName">변경</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "SungJae",
      lastName: "Park",
      fullName: "",
    };
  },
  watch: {
    firstName() {
      this.fullName = this.firstName + "" + this.lastName;
    },
    lastName() {
      this.fullName = this.firstName + "" + this.lastName;
    },
  },
  methods: {
    changeName() {
      this.firstName = "SON7AE";
    },
  },
};
</script>

Watch 역시 computed처럼 Vue 인스턴스에 정의된 데이터 값이 변경이 일어나는지를 감시하고, 변경이 일어나면 지정된 함수를 실행시킬 수 있다. 하지만 computed의 경우는 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 사용이 된다면, Watch는 Watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용된다.

또한 Watch의 경우는 computed와 다르게 실제 데이터 변경이 일어나기 전까지는 실행되지 않는다.

즉, 초기에 지정된 값인 firstName과 lastName에 값이 있음에도 불구하고, fullName은 여전히 아무런 값도 할당되지 않는다. firstName과 lastName의 초기에 할당된 값이 반드시 변경되어야지만, 변경이 일어나야만 watch가 실행된다.