[Vue] Computed, Watch, methods 차이
Computed(계산된 속성)
<p>뒤집힌 메시지: "{{ reversedMessage() }}"</p>
// 컴포넌트 내부
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
- 복잡한 Javascript 표현식은 HTML 정보가 들어가야하는 부분보다는 vue인스턴스 안에서 처리하는 것이 좋음
- 간단한 연산을 할때는 좋지만, 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어려움
- computed 속성은 그런 처리를 담당하는 데이터 연산들을 정의하는 영역
- computed는 data 속성에 변화가 있을 때 자동으로 다시 연산
- computed는 message같은 프로퍼티가 변화가 있을 때만 다시 연산을 하고 한번 연산한 값을 캐싱해놓았다가 필요한 부분에 다시 재 활용
- 같은 페이지내에서 같은 연산을 여러번 반복할 때 사용하면 효율적
computed: {
now: function () {
return Date.now()
}
}
- 또한 Data.now()처럼 아무곳에도 의존하지 않는 computed속성의 경우 절대로 업데이트 되지 않음
methods
- 캐싱이라는 개념이 없기 때문에 매번 재 렌더링 됨
- 캐싱 효과가 필요없으면 methods 사용하고, 필요하면 computed 사용할 것
- ex) 데이터가 자주 변동되면, 비용적인 면에서 -> computed
- ex) 데이터가 수시로 업데이트 된다면, 계속해서 캐시를 저장하는 computed보다는 mehtods가 더 효과적
Watch(감시자)
- 데이터(data()) 변화를 감지하여 자동으로 특정 로직(<temple> 등)을 수행
- 대부분의 경우 computed속성이 더 적합하지만 사용자가 만든 감시자가 필요할 때도 있음
- 그래서 watch옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공
- computed 속성과 유사하지만, computed는 내장 api를 사용하는 간단한 연산정도에 적합하고, watch는 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합
- ex) API를 호출하고 나서 나중에 변화가 되는것이 있으면 여기에 추가
댓글
댓글 쓰기