[Vue.js] Computed 속성에 대하여
Computed 속성
템플릿 문법에서 JavaScript 표현식을 사용하면, 쉽게 원하는 데이터를 DOM에 그릴 수 있습니다.
하지만 복잡한 연산을 템플릿 안에서 하게 되면, 코드를 이해하고, 유지보수하기 어려워집니다.
아래에서 예를 보여드리겠습니다.
<1. Javascript를 사용한 템플릿 문법>
<2. computed 속성을 사용한 문법>
new Vue({
el:'#example',
data: { message:'안녕하세요' },
computed: {
reversedMessage:function () {
return this.message.split('').reverse().join('')
}
} })
computed의 캐싱 VS methods
템플릿 문법의 JavaScript 표현식에서 methods를 사용하여 위 예제의 computed를 사용 한 결과와 동일한 결과를 얻을 수 있습니다.
여기서 methods란?
자바스크립트 함수를 모듈화했던 js파일처럼 vue컴포넌트 내에서 함수를 정의하는 부분
ex) js/common.js
function test()
{
console.log(‘do something’)
}
function testFn()
{
alert('this is test function!')
}
<methods 사용 예제>
<div id="example">
<p>원본 메시지: "{{ message }}"</p>
<p>역순으로 표시한 메시지: "{{ reversedMessage() }}"</p>
</div>
computed를 사용하는 방법과 methods를 사용하는 방법의 최종 결과는 동일합니다
computed와 methods의 차이점은 computed는 종속 대상(reversedMessage의 종속 대상은 message)을 캐싱한다는 것입니다. 그렇기 때문에 computed는 종속 대상이 변경 될 때만 함수를 호출합니다. message 값이 변하지 않는 한 reversedMessage를 여러번 호출하여도 다시 계산하지 않고 캐싱한 결과를 즉시 반환합니다.
시간이 많이 걸리는 계산을 할 때, computed을 사용하면 더 좋은 호율의 어플리케이션을 만들 수 있습니다. 캐싱을 하지 않고, 호출 할 때마다 새롭게 계산을 해야 하는 경우에는 methods를 사용해야 합니다.