watch 와 computed 차이점 알아보기

 

TL;DR😄

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

computed는 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 사용합니다. 정의된 데이터 값을 바탕으로 새로운 데이터 값을 생성하고 새로운 데이터 값에서 참조하고 있는 기존 데이터 값의 변경을 감지합니다. 그리고 참조하고 있는 데이터 값의 변경과 상관없이 최초에 computed에 정의된 데이터 함수를 실행합니다.

 

watch는  watch에 정의된 데이터 값 하나만을 감시하기 위해 사용합니다. 또한 computed와 다르게 실제 데이터 변경이 일어나기 전까지는 실행되지 않습니다.(초기에 할당된 값에 변경이 일어나야만 watch가 실행됩니다.)

 

💡 Computed

computed는 참조하고 있는 값이 변경될 때마다 정의된 계산식에 따라 값을 출력합니다. 즉 computed는 정의된 계산식에 따라 결과값을 반환할 때 사용됩니다.

 

<template>
  <div>
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  name: 'test',
  data(){
    return {
      message: '안녕하세요'
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

computed 프로퍼티를 보면 reverseMessage 라는 프로퍼티에 값으로 익명 함수가 할당되어 있습니다. computed에 정의하는 이 익명 함수는 반드시 값을 리턴하도록 작성돼야 합니다. 

 

💡 Watch

watch는 지정한 대상의 값이 변경될 때마다 정의한 함수가 실행된다고 이해하면 됩니다. 즉 watch는 어떤 조건이 되었을 때 함수를 실행시키기 위한 트리거로서 사용할 수 있다는 의미입니다. 

 

<template>
  <div>
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  name: 'test',
  data(){
    return {
      message: '안녕하세요',
      reversedMessage: ''
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      this.reversedMessage = newVal.split('').reverse().join('')
    }
  }
}
</script>

 

watch를 정의한 부분을 보면 message 프로퍼티에 익명함수가 할당되어 있습니다. 이 익명 함수가 콜백 함수 역할을 하며 message 프로퍼티가 변경되면 변경된 값을 콜백 함수의 첫 번째 인자로 전달하고, 이전 값을 두 번째 인자로 전달하여 실행하게 됩니다.

computed가 새 프로퍼티를 생성하고 그것의 getter로 익명 함수를 설정되는 것과는 달리 watch는 아무 프로퍼티도 생성하지 않고 익명 함수는 단순히 콜백 함수로의 역할을 합니다. watch에 명시된 프로퍼티는 감시할 대상을 의미할 뿐입니다.

 

👍 그렇다면 언제 어떻게 사용할 것인가?

위의 예시처럼 인스턴스의 data에 할당된 값들 사이의 종속관계를 자동으로 세팅하고자 할 때는 computed로 구현하는 것이 좋습니다.  좀 더 쉽게 이해하자면 reverseMessage는 message값에 따라 결정되는데 이 종속관계가 조금이라도 복잡해지면 watch로 구현할 경우 중복계산이 일어나거나 코드 복잡도가 높아지고 지속적인 감시로 인해 성능 저하도 가져오게 됩니다. computed로 구현 가능한 것이라면 watch가 아니라 computed로 구현하는 것이 좋다고 공식 가이드도 권장하고 있습니다.

 

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

✔ computed의 경우 종속관계가 복잡할수록 재계산 시점을 예상하기 힘들기 때문에 종속관계의 값으로 계산된 결과를 리턴하는 것 외의 사이드 이펙트가 일어나는 코드를 지양해야 합니다.

 

 

출처 및 참고:

• vue.js 프로젝트 투입 일주일 전(도서)
• https://medium.com/@hozacho/맨땅에vuejs-computed-vs-watch-언제써야할까-d25316c4ef42
• https://blog.jeongwoo.in/vue-js-watch와-computed-의-차이와-사용법-e2edce37ec34