[Vue.js] computed와 watch

1. computed 속성

컴퓨티드(computed) 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성으로 뷰 템플릿 코드의 가독성을 높여준다.

컴퓨티드 속성은 대상이 된 data 속성이 변경될 때 이를 감지하여 정의된 함수를 자동으로 실행시키고, 정의된 함수는 반드시 값을 리턴하도록 작성해야 한다. 아래 공식 사이트에 문서에서 제공하는 코드를 보자.

data 속성에 정의된 message가 ‘안녕하세요’라는 값으로 변경될 때 컴퓨티드 속성에 정의된 reverseMessage라는 익명함수가 실행이 되고 결과를 리턴하는 구조로 동작한다.

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

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

2. watch

와치(watch) 속성 역시 인스턴스에서 정의된 data의 변경이 일어날 때 실행된다는 점에서 computed 속성과 비슷하지만 몇 가지 차이점이 존재한다.

와치 속성은 쉽게 얘기해서 data가 변경될 떄마다 정의한 함수가 실행된다고 이해하면 된다. 컴퓨티드의 경우 새로운 이름으로 익명함수를 할당하지만 와치는 변경되는 data 속성의 이름으로 익명함수를 설정한다. data가 변경되면 와치 속성 내부에 변경된 data의 이름으로 선언된 함수가 실행되는 구조이며 따로 값을 리턴하지 않는다.
그리고 컴퓨티드는 인자를 받을 수 없는 반면 와치는 변경된 값과 변경 이전의 값을 인자로 받을 수 있다는 차이점이 있다.

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

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

3. 언제 사용해야 할까?

computed 속성은 가독성을 위한 것으로 복잡한 연산을 반복적으로 수행할 때 사용하면 좋다. 중복된 계산이나 종속관계를 자동을 세팅할 때 주로 사용하고, watch는 데이터 호출과 같이 상대적으로 시간이 소모되는 비동기 처리를 하거나 프로퍼티의 변경 시점에 특정한 액션을 취하고자 할때 사용한다.

생각하기 어렵다면 공식사이트에서 추천하는대로 컴퓨티드 속성으로 구현이 가능한 것이라면 와치가 아닌 컴퓨티드 속성을 사용하도록 하자.