[Vue.js] computed와 method

Vue의 computed와 method의 차이를 스스로 명확하게 설명하지 못하고 있다고 생각해서

공식문서와 블로그를 보면서 차이점을 정리해보았다.

 

가장 큰 차이는 함수 연산 값을 사용하는지(computed) 또는 항상 함수를 실행하는지(method)이다.

 

computed의 경우, 템플릿의 data(종속된 값)에 따라 메서드의 연산 결과 값을 사용한다.

종속된 값의 변경을 확인하고, 변경되지 않았을 경우에는 캐싱되어있는 값을 그대로 사용한다.

 

method의 경우, 화면이 랜더링되어서 메서드를 호출할 때마다 연산을 수행한다.

실제 VS 코드에서 computed옵션을 타고 computedOptions를 보니 cache 여부를 boolean으로 판단하고 있는 것을 확인할 수 있었다.

추가) 전에 공부하면서 computed는 인자를 사용하지 않고, method는 인자를 사용한다라는 문장을 본 기억이 있는데 computed는 종속된 값에 대한 연산을 수행하기 때문에 이런 문장을 사용하신 것 같다.

 

 

내용을 정리해보다 문득 내부 코드가 궁금해져서 Vue 레포지토리에서 관련된 로직을 찾아보고 아래와 같은 결론을 얻을 수 있었다.

Computed로직을 먼저 살펴보았다.

 

initComputed()

 

→ initComputed에서는 우리가 컴포넌트 파일 내 computed: 하위에 작성한 메서드들을 반복문을 통해 처리하는 로직인 것 같다.

→ 203번째 라인은 다른 data, props, method에 동일한 이름의 메소드, 변수가 있는지 체크해주고, 이상 없을 경우 computed로서 정의해주는 로직으로 이해했다.

 

defindComputed()

→ defindComputed 함수에서는 위 initComputed에서 computed로 선언한 메서드들에 대해서 캐시 값을 확인하고 캐시 여부에 따라 createComputedGetter, createGetterInvoker를 통해서 값을 가져오는 것으로 이해했다.

 

 

method와 관련된 로직을 살펴보았다.

 

initMethods()

→ method의 경우 data, props 등 다른 속성과 중복 여부, 함수 여부를 체크하는 로직은 computed와 동일하게 존재했지만, computed로직과는 다르게 cache값을 다루는 로직을 확인할 수는 없었다.

 

내부 로직을 보니까 확실하게 이해되었지만, 이게 내가 잘 이해한건지에 대해서는 약간의 찝찝함이 남아있다...

그래도 확실히 computed와 method의 차이는 쉽게 까먹지 않을 것 같다.

 

## Reference

 

Computed 속성과 Watch | Vue.js

 

(Vue.js) Computed vs Methods 속성은 어떤 차이점을 가지고 있을까?