[Vue.js]Computed와 Methods의 차이
input 으로 넘겨지는 value 값이 @input을 통해 잘 들어오고 있나 확인을 하고 싶었다.
전에 들었던 강의에선 watch를 이용해 해당 데이터가 바뀌면 이전 데이터와 변경된 데이터를 콘솔로 찍어주는 방식을 이용했었다.
검색해보니 computed와 method를 이용해서도 할 수 있다는걸 알았다.
뭐가 다른거지? 차이점이 궁금해서 정리해보기로 했다.
1. Watch
말 그대로 감시자 역할을 한다.
입력한 데이터의 변경을 감지하여 실행되는 특징이 있다.
<div id="demo">
<p>{{ fullName }}</p>
<button @click='firstName="John"'>change-firstName</button>
<button @click='lastName="Doe"'>change-lastName</button>
</div>var vm = new Vue({
el: '#demo',
data: { firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
console.log('change-firstName');
this.fullName = val + ' ' + this.lastName },
lastName: function (val) {
console.log('change-lastName');
this.fullName = this.firstName + ' ' + val
}
}
})
버튼을 한 번씩 눌러보면
➡️ 결과
버튼을 눌렀을 때 firstName과 lastName 데이터의 변경을 잘 감지한다.
2. Computed
Computed의 특징을 한 단어로 말하자면 '종속성'에 있다.
vue 공식 홈페이지에 설명이 잘 나와있어서 그대로 정리해보기로 했다.
<div id="example">
<p>원본 메시지: "{{ message }}"</p>
<p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>var vm = new Vue({
el: '#example',
data: { message: '안녕하세요' },
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
버튼을 누르면
➡️ 결과
원본 메시지: "안녕하세요"
역순으로 표시한 메시지: "요세하녕안"
이렇게 보면 methods와의 차이점을 찾아 볼 수 없다.
하지만 computed의 강점은 속성의 캐싱에서 나온다.
* 캐싱이란?
캐시는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.
2-1) Computed 의 캐싱
버튼을 2번 눌러보자.
<div id="example">
<p>computed: {{ computedCount }}</p>
<p>method: {{ methodsCount() }}</p>
<button @click='count1++'>computedCount</button>
<button @click='count2++'>methodsCount</button>
</div>var vm = new Vue({
el: '#example',
data: { count1 : 0, count2 : 0 },
computed: {
omputedCount: function () {
console.log('computed 감지');
return this.count1
}
},
methods: {
methodsCount: function () {
console.log('methods 감지');
return this.count2
}
}
})버튼을 각각 두번 씩 클릭을 하면
➡️ 결과
둘 다 count를 정상적으로 뿌려주긴 하는데 콘솔에 찍히는데 차이가 있다.
methods 감지는 2번 중복해서 찍혔다.
computed는 캐싱을 통해 count라는 데이터에 종속되었다.
즉 종속 대상에 따라 캐싱(저장)되는 특성이 있다.
그래서 종속대상의 데이터가 변경되지 않으면 실행시키지 않는다.
반면 methods는 count 데이터에 종속되지 않았기에 데이터가 변경되지 않아도 코드를 실행시킨다.
이게 코드가 길어지고 복잡해지면 성능에 차이가 나기 시작한다.
2-1) Computed 의 getter/setter 함수
getter와 setter 관려 내용 포함하여 추후 정리 예정
정리
watch 보다는 computed를 많이 쓰는 추세다.
computed와 methods의 경우 parameter가 있고 return 해 줄 필요가 없을 때는 method를 쓰고
그 외의 경우에는 성능이 좋은 computed를 쓴다.
끝
