[ VueJS 입문 ] 계산된 속성 computed, computed vs methods / VueJS Instance

• VueJS의 자동 계산된 속성 computed - https://jsfiddle.net/sunghun/th2m9ws7/30/

샘플은 앞에 js코드를 넣는 샘플과 동일한 결과 값이지만 소스를 보면 Vue의 computed 속성 안에 isLargerThenTen() 이라는 함수를 선언하고 count * 3 값이 10보다 작은지, 큰지를 확인하고 return하도록 했다. 그런데, computed가 아닌 methods 속성에도 동일하게 사용을 하면 같은 결과가 나오게 된다. 그렇다면 computed와 methods는 무슨 차이를 가지고 있는가?

 

• Computed VS Methods ( 공식사이트 - 계산된 속성과 감시자 ) - https://jsfiddle.net/sunghun/th2m9ws7/35/

Data 객체 안에 count라는 변수를 만들고 count를 1씩 증가하는 버튼을 만들었다. 그리고 computed에는 2의 배수로 return하는 double() 함수를 만들고, methods에는 3의 배수로 return하는 triple()이라는 함수를 만들었다. 그렇게 왼쪽버튼을 누르면 세가지의 내용이 값이 변경되는걸 볼수 있고 우측버튼을 누르면 세개와는 별개로 second count만 값이 변경되는걸 볼수 있다. 하지만 이 내용을 콘솔창에서 확인을 해보면 세개와 별개로 second count만 변경되는것이 아니다. 왼쪽 버튼은 computed와 methods의 콘솔이 찍히는것을 확인 할 수 있다. 하지만 우측 버튼을 누르면 computed는 콘솔이 찍히지 않고 methods만 찍히는것이 보일 것이다. 이는 computed는 자신이 참고하는 count의 값이 변경될때만 재실행 되었고, methods는 자신이 참고하는 count의 값이 변경될때는 물론 자신의 계산식과는 무관한 secondCount가 변경될때도 재실행 되었다. 즉, 추후 많은 함수들과 많은 계산식들이 사용될때 퍼포먼스 측면으로 보면 사용되지 않을때 불필요하게 재실행되면 비효율적이고 비생산적인 느린 퍼포먼스를 보일 수 있다. 그리하여 모든 상황에서 실행되는 methods, 필요시에만 실행되는 computed를 따로 제공하고 있다.