[ Vue.js ] Computed 속성 다루기

이 글은 해당 문서를 참조하였습니다.

computed와 watch — Vue.js

 

■ Computed 속성 사용하기

1. {{ }} 템플릿 내에 복잡한 연산 로직을 수행하고 싶을 때 사용
2. computed와 methods를 구분하여 사용할 수 있다. 
    -> computed는 캐싱을 하지만 methods는 하지 않는다.
3. watch 보다 computed를 사용하는 것이 코드의 반복성 때문에 더 낫다
4. 기본적으로 getter 함수만 가지고 있지만, setter 함수를 만들어 사용할 수 있다.

 

■ Example

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

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

이때, reservedMessage의 값은 항상 message의 값에 의존한다.
추가적으로, message의 값이 존재하지 않는다면 reservedMessage는 연산되지 않는다.

 

 ✔ Computed 속성은 항상 어딘가에 의존한다.

computed: {
	now: function () {
		return Date.now()  // Update 되지 않음
	}
}​

Date.now() 와 같은 아무곳에도 의존하지 않는 속성일 경우 업데이트 되지 않는다.

 

 

Methods 로도 같은 결과를 낼 수 있다.

methods: {
	reversedMessage: function () {
		return this.message.split('').reverse().join()
	}
}

  => methods를 사용할때에는 cache가 저장되지 않는다. 

 

---

■ Computed VS Watch

Computed의 코드들이 Watch 코드들보다 훨씬 적은 코드를 사용하고 있다는 것을 알 수 있다.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  // computed 속성의 코드 길이는 짧다.
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  // watch 속성의 길이는 반복적이고 data부분에 추가적으로 기입을 해서 사용해야 편하다.
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})