[뷰 Vue.js] Computed 속성과 Watchers

Computed Properties

- Computed Properties(계산된 속성)은 탬플릿의 데이터 표현을 좀 더 직관적이고 간결하게 쓰도록 도와줌
- 복잡한 로직이나 반복해야하는 코드들을 computed property로 만들 수 있음

[ Computed Properties를 사용하지 않았을 경우 ]

- 아래와 같이 코드를 작성하면, 한 번에 message가 어떻게 표시될지 알 수 없고, 해당 코드를 여러 곳에 적용시켜야 할 때 복잡성이 증가하게 됨

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

[ Computed Properties 사용시 ]

- 아래와 같이 작성함으로써 코드의 재사용성과 가독성을 높일 수 있다.

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

let vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

[ Computed Properties 의 장점 ]

1. 캐싱 (Caching)
- 의존하는 값에 변화가 없다면 다시 계산하지 않고 이전 값을 반환 (Methods 로 설정할 경우 호출할 때마다 반복 계산)

2. 지연된 평가 (Lazy Evaluation)

- computed 속성이 참조가 되었을 때만 콜백이 수행됨 (데이터 비용이 많이 드는 연산 수행시 장점)

Watch Properties

- 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성

[ watch 사용 예시 ]

// 라우트값(홈페이지 주소)가 변경됨에 따라 handler가 실행됨.
export default {
  watch: {
    $route: {
      handler() {
        this.changeData();
      },
      immediate: true
    }
  }
};