Vue Methods vs Computed vs Watch

vue를 사용하면서 헷갈렸던 methods 와 computed 와 watch 를 비교하며 정리해보자.

 

Computed 속성 

computed 속성을 사용할 값의 이름을 정의하고 return 에 종속될 데이터를 정의한다.

return 에 정의된 데이터가 변경될 때 computed 에 정의된 로직이 실행된다.

Methods vs Computed 속성 

👉 computed 속성을 사용하는 이유를 알아보자

 

구현하려는 것) message 와 message 가 역순으로 변경된 reverseMessage를 한 화면에 표시되도록 만들어야 한다.

👉 방법 1) methods 사용 

위의 코드를 설명해보자면 맨 위 div는 message의 역순텍스트를 출력해 주는 부분이다.

두 번째 줄의 div는 message 값을 입력하는 input, 세 번째 줄의 div는 text 값을 입력해 주는 input이다.

요기서 두 번째 input 즉 message 값을 변경시키는 input에 변경 사항이 없어도, text  input 값에 변화를 주면 reverseMessage는 message 변화에 상관없이 로직을 실행한다.

👉방법 2) computed 속성 사용 

computed 속성이 적용된 computedReverseMessage를 보면 위에서 정의했던 mesthods의 reverseMessage와 동일한 로직인 것을 확인할 수 있다.

다른 점은 computed 속성은 message에 의존하고 있기 때문에 message 값에 대해 변화가 없을 경우 캐싱되어 있는 값을 그대로 반환해 준다는 것입니다.

 

따라서 computed 속성에 정의돈 것은 methods 로도 정의하여 사용할 수 있지만, 

methods에서 정의하여 사용할 값의 로직이 복잡한 로직일 경우 computed 속성을 사용하면 성능상 이점을 가져올 수 있을 것이라 생각한다. 

왜냐하면 캐싱되기 때문에 해당 메서드가 실행되지 않아도 될 때는 실행되지 않기때문이다.

 

 

computed 값에 대한 장점을 알아보았다면 watch에 대해 알아보자! 😄

watch 속성

👉 watch 사용방법

왼쪽부터 firstName, lastName 를 입력하는 input box 가 있고,

watch 속성을 사용해 위의 input box에 입력하는 값의 변경을 감시할 수 있다.

감시하고자 하는 데이터를 watch에 정의한다.

두 개의 매개변수를 받을 수 있는데 맨 처음 매개변수는 변경된 값, 두 번째 매개변수는 변경되기 전의 값을 받을 수 있다.

맨 처음 before라는 데이터가 firstName 에 정의되어 있었고, input box에서 e를 제거하면,

콘솔창에 뜬 로그값에 변경된 값, 변경되기 전의 값이 출력된 것을 볼 수 있다.

 

 

Computed 속성    VS.  Watch 속성 

👉 구현할 것) input 박스 두 개에 firstName & lastName 을 적을 수 있고 fistName와 lastName 을 더해 fullName을 출력하는 div 가 존재 

👉 computed 속성으로 구현 

computed 속성에 fullName 을 정의하고 firstName & lastName 에 의존하게 만들었다.

즉. firstName or lastName 이 변경된다면 새로운 fullName 값을 계산해 반환해 준다.

 

👉 watch 속성으로 구현 

watch 속성에 firstName, lastName의 변경에 대한 감시를 하고 값이 변경될 경우 각각 fullName을 새로 구해 fullName에 계산된 값으로 업데이트되도록 구현했다.

 

computed 속성과 watch 속성으로 구현한 것을 보면 computed 속성으로 구현한 게 중복이 없음을 알 수 있다.

즉, computed 속성과 watch 속성 둘 다 구현할 수 있는 것이라면 보통 computed 속성을 사용하는 것이 보기 깔끔하다는 것을 알 수 있다.

 

그렇다면 watch 속성은 왜 있는 것일까? watch 속성도 필요가 있어 나온 것이 아닌가..🤔

-> watch는 긴 처리가 필요한 비동기 로직을 실행해야 할 때 사용하기 적합하다고 합니다.. 

즉 바동기 처리가 필요하지 않은 로직에서는 computed를 비동기가 필요하다면 watch를 사용하면 된다.

 

한 가지 궁금한 점은 computed 속성으로 비동기 처리가 불가능 한것인가..!?