Vue Computed, Watch

 

- Computed 속성

• 간단한 연산일 경우 템플릿 내에 표현식으로도 가능
• 복잡하고 반복적인 경우 Computed 속성을 사용

---

- Computed 속성의 캐싱 vs 메서드

• 표현식에서 메서드를 호출하여도 동일한 결과
• 차이점
  • *computed 속성 *
    • computed 속성은 반응형 종속성에 기반하여 캐시된다.
    • computed 속성은 반응형 종속성 중 일부가 변경된 경우에만 재평가 된다.
    • 데이터가 변경되지 않으면 computed 속성에 대해 여러번 접근하더라도 함수를 다시 실행할 필요없이 이전에 계산된 결과를 즉시 반환
      
      
  • methods
    • 다시 렌더링이 발생할 때마다 항상 함수를 실행

---

- Computed Getter, Setter

• Computed 속성은 기본적으로 Getter 이지만, 필요할 때엔 Setter도 제공
• vm.fullName = 'mko' 를 실행하면 Setter가 호출되고 vm.firstName과 vm.lastNam이 그에 따라 업데이트 된다.
• Vuex(Store, 중앙 집중식 저장소)에서 유용하게 사용

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

---

- Watch 속성

• 대부분의 경우 computed 속성이 더 적절하지만, 사용자 지정 감시자(watcher)가 필요한 경우가 있다.
• 데이터 변경에 대한 응답으로 비동기 혹은 비용이 많이 드는 작업을 수행하는 경우 가장 유용

https://v3.ko.vuejs.org/guide/computed.html#watch-%E1%84%89%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A5%E1%86%BC

Computed 속성과 Watch | Vue.js

---

- Computed 속성 vs Watch 속성

• 명령형 watch 콜백보다 computed 속성을 쓰는 것이 더 나은 경우가 많다.
• watch의 경우 명령형이고 코드를 반복

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName(val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}).mount('#demo')

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}).mount('#demo')

 

[ 참고자료 ]

https://v3.ko.vuejs.org/guide/computed.html#computed-%E1%84%89%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A5%E1%86%BC

Computed 속성과 Watch | Vue.js