Vue.js - computed, method 설명
오늘은 vue.js의 compute, method 를 비교해서 한 번 설명 해보도록 하겠습니다. 최근 프로젝트에서 Vue.js
사용 중에 두 속성의 차이점을 알지 못하고 사용하다가 최근에 대용량의 JSON 파일 파싱 작업 중 만족할 만한 퍼포먼스가 나오지 않아서 속성 변경 후 문제 해결을 경험했습니다.
아래에서 기본표현식, 일반표현식, Computed, Method 네 가지 항목을 비교하면서 설명해보도록 하겠습니다.
Vue.js 관련 포스팅 : Vue 참고
Vue.js 관련 포스팅 : Vue 참고
Vue.js - 세부 설명
<div id="example"> |
기본적인 템플릿 데이터 바인딩 형태입니다. 이중 중괄호를 사용합니다.
<div id="example"> |
템플릿 내에서 함수 표현식을 사용하는 방법입니다. 해당 패턴을 소스코드 전역에 걸쳐서 빈번하게 사용한다면 유지보수가 힘들어 질 가능성이 있습니다.
<div id="example">
{{ reversedMessage1 }}
</div>
<div id="example"> |
Vue 인스턴스(하단 소스코드 참조)의 computed 속성에서 바인딩을 했습니다. 이렇게 함으로써 data의 message속성에 의존관계가 설정되는 것입니다. 즉, message 변수의 값이 변경 될 때만 reversedMessage1가 실행 되어 업데이트 되는 것 입니다. 즉, 변경되는 부분이 없다면, 캐싱(Cache)처리가 되어 기존 message 값이 바인딩 되어 빠른 속도의 렌더링을 기대할 수가 있습니다.
<div id="example">
{{ reversedMessage2() }}
</div>
<div id="example"> |
computed 속성과 다른점은 메소드(함수)형태를 실행함으로써 message 값이 렌더링 됩니다. 즉, 변경 유무와 상관없이 항상 호출되는 것이죠. 다시 말씀드리면 렌더링이 발생할 때 마다 항상 호출 된다는 뜻입니다.
다시 정리해보면 computed는 일부가 변경된 경우에만 메소드를 호출되며, 반대로 method는 변경과 상관없이 항상 호출된다는 뜻이죠.
Vue.js - 전체 소스코드
하단 소스코드는 첨부파일과 동일합니다. 브라우저에서 실행하시면 결과를 확인할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>vue.js</title> </head> <body> <div id="app"> <h3>Vuejs - compute, method</h3> <div id="example"> <p>Original : {{ message }}</p> <!-- 기본 --> <p>Expression: {{ message.split('').reverse().join('') }}</p> <!-- 표현식 --> <p>Compute: {{ reversedMessage1 }}</p> <!-- Compute --> <p>Method: {{ reversedMessage2() }} <!-- Method --> <p> <input v-model="message"></p> </div> </div> <script src="https://unpkg.com/vue"></script> <script> //인스턴스 생성 var app = new Vue({ el: '#example', data: { message: '12345' }, computed: { //message 값이 변경되지 않으면 캐싱 된다. reversedMessage1: function () { // this : vm 객체 return this.message.split('').reverse().join('') } }, methods: { //message 값은 항상 메소드 호출 후 반환된다. reversedMessage2: function () { return this.message.split('').reverse().join('') } } }) </script> </body> </html> | cs |
Vue.js - 실행 화면
실제 실행 결과입니다. Console 창에서 직접 app 인스턴스에 접근 후 message 값을 변경해봅니다.
Vue.js - 소스코드 다운로드
vue_basic8_example.zip
마무리
캐싱을 잘 활용하면 비교할 수 없을 정도로 빠른 성능을 기대할 수 있습니다. 예를들어 규모가 큰 배열을 순회하면서 계산을 한다고 가정하면, 종속성에 따른 캐싱 후 렌더링을 통해서 매번 같은 메소드를 호출할 필요가 없다는 뜻입니다. 만약에 항상 특정 메소드 실행을 통해 검증해야 하는 로직이 있다면 Computed 속성을 사용하면 안되겠죠?
다음 포스팅에서는 스타일(Style) 바인딩에 대해서 알아보겠습니다. 감사합니다.
참고문헌
Vue.js 관련 레퍼런스(Reference) : 이동
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - npm & 테스트(Sample) 프로젝트 설치 및 실행 방법 (0) | 2018.04.16 |
|---|---|
| Vue.js - 기초 문법 배우기(10) 강의 및 예제 소스 - 기초 문법 (1) | 2018.03.12 |
| Vue.js - 기초 문법 배우기(8) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.09 |
| Vue.js - 기초 문법 배우기(7) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.07 |
| Vue.js - 기초 문법 배우기(6) 강의 및 예제 소스 - 기초 문법 (2) | 2017.12.01 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}