[Vue.js] Watch vs Computed

watch와 computed의 차이점에 대해 알아보려고 한다.

watch와 computed는 둘 다 Vue 인스턴스 내에 정의된 데이터 값에 변경이 일어나는지를 감시하고 변경될 때마다 정의된 함수가 실행된다.

 

✅ computed

만약 message라는 문자열을 뒤집어서 출력하고 싶다면 여러 가지 구현 방법이 있다. 

 

1. 첫 번째로 문자열 표현식인 이중 중괄호를 이용하여 내부에서 연산을 하여 데이터 값을 보여준다.

<template>
  <div>message: {{ message }}</div>
  <div>revsersedMessage: {{ message.split("").reverse().join("") }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, World!",
    };
  },
};
</script>

 

2. 두 번째로 함수를 이용하여 데이터 값을 보여준다.

<template>
  <div>message: {{ message }}</div>
  <div>revsersedMessage: {{ message.split("").reverse().join("") }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, World!",
    };
  },
};
</script>

하지만 이렇게 데이터를 한 화면에서만 보여주는 것이 아닌 여러 화면에서 보여주게 된다면 위의 경우, 데이터가 필요할 때마다 데이터의 결합과 함수 호출 연산이 일어난다. => 비효율적!!

 

따라서, 이런 경우 computed를 사용한다.

computed는 Vue 인스턴스 내에 정의된 데이터 값과 연관된 또 하나의 데이터를 정의해서 사용할 수 있도록 해준다.

computed는 데이터 값에 변경이 일어나는지 감시한다. 따라서 데이터 값이 변경되었을 때만 자동으로 실행되어 값 갱신이 일어난다. 그렇기 때문에 여러 화면에서 데이터를 써도 computed내에 정의된 데이터는 값이 변화하지 않는 이상 한 번의 연산만 수행된다.

<template>
  <div>message: {{ message }}</div>
  <div>revsersedMessage: {{ message.split("").reverse().join("") }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, World!",
    };
  },
};
</script>

// computed내에 reversedName이 정의되어 있고, 여기에서 reversedName은 함수이자 데이터 값이다.
// computed내에 정의된 값을 사용할 때 함수를 호출하듯 ()를 붙여주면 안 된다. 데이터 취급해서 호출한다.

 

 

 

✅ watch

watch도 computed와 같이 vue 인스턴스에 정의된 데이터 값이 변경되었는지 감시하고 변경되었을 때 함수를 실행시킬 수 있다.

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

<template>
  <div>message: {{ message }}</div>
  <div>reversedMessage: {{ rMessage }}</div>
  <button @click="changeMessage">메세지 변경</button>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, World!",
      rMessage: "",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Bye, World!";
    },
  },
  watch: {
    message: function () {
      this.rMessage = this.message.split("").reverse().join("");
    },
  },
};
</script>

 

또한 watch는 실제 데이터가 변경되기 전에는 실행되지 않기 때문에 초기값에 값이 할당되지 않고 데이터 값에 변화가 일어났을 때 값이 갱신된다. 따라서 처음에는

값이 할당되지 않아 나타나지 않는다.

 

그래서 버튼을 추가하여 데이터가 변경되게 하면

그것을 감지하여 데이터가 보이는 것을 알 수 있다.

 

✅ computed vs watch

Vue.js에서는 computed를 사용할 수 있다면 watch가 아닌 computed를 우선으로 사용하는 것을 권장하고 있다.

computed는 계산해야 하는 목표 데이터를 정의하는 방식인 '선언형 프로그래밍' 방식이며, watch는 감시할 데이터를 지정하고 그 데이터가 바뀌면 함수를 실행하라는 방식인 '명령형 프로그래밍' 방식이다. (일반적으로 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복이 적다)

 

데이터의 변경의 응답으로 비동기식 계산이 필요한 경우나 혹은 시간이 많이 소요되는 계산이 필요할 때 watch를 사용하는 것이 좋다.