[Udemy Vue 완벽가이드 Section2] 31. 메서드 vs 연산(Computed) vs 감시자(Watcher)

# Methods

: Use with event binding OR data binding

 

 1) Data binding : Method is executed for every "re-render" cycle of the component.

 - 데이터 바인딩을 위해 method를 쓰는 경우, 즉, 중괄호 사이에 method를 사용하여 템플릿에서 Vue 인스턴스로 logic을 아웃소싱 하는 경우 method는 컴포넌트의 리렌더링 주기에 맞춰 매번 실행된다. 그러므로 변동사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 모든 메서드를 다시 호출한다.

 - 페이지에 변동사항이 있을 때마다 method가 재실행된다. 원하지 않으면 computed 프로퍼티를 사용해라!

 

아래 글 참고 :)

[Udemy Vue 완벽가이드 Section2] 28. 데이터 바인딩에 사용되는 메서드 작동원리

 

 2) Event binding : 이벤트 바인딩에는 method를 항상 쓴다.

[Udemy Vue 완벽가이드 Section2] 22. 이벤트 및 메서드(methods옵션)

 

 

# Computed

: Use with data binding. 이벤트 바인딩엔 computed를 사용하지 않는다.

 

1) Computed properties are only re-evaluated if one of their 'used values' changed.

- 다른 data를 기반으로 하는 데이터를 가져오기에 유용하며, 의존하는 data가 바뀔 때만 Vue에 의해 재평가하거나 재실행된다. 즉, computed 프로퍼티에 사용된 data가 바뀌는 경우. 

- 다른 data가 바뀔 때는 method와는 다르게 computed 프로퍼티는 재평가하지 않는다.

 

2) Use for data that depends on other data

 - computed 프로퍼티는 다른 데이터에 의존하는 데이터에 사용해라.

 

[Udemy Vue 완벽가이드 Section2] 29. 연산(Computed) 프로퍼티 소개

 

 

 

# Watch

1) Not used directly in template

 - 템플릿에 직접 사용하지 않는다. 템플릿 내부에서 참조하진 않지만, computed 프로퍼티를 포함해 어떤 프로퍼티든 감시자로 감시할 수 있다.

 

2) Allows you to run any code in reaction to some changed data(e.g. send HTTP request etc.)

- 데이터 변경에 대한 반응을 코드로 실행할 수 있다. ex: HTTP 요청 / 타이머 설정 / 로컬 스토리지에 데이터 저장하는 작업 등

 

3) Use for any non-data update you want to make

 - 주로 데이터가 아닌 업데이트에 감시자를 사용해야한다. 바뀌는 데이터를 토대로 data가 아닌 내부에서 업데이트하는 작업이 있을때 감시자를 사용하는 게 좋다.

 

위 세가지 중, watch가 가장 빈도가 낮다. 왜냐하면 이벤트 바인딩에는 methods를, 다른 data에 의존하는 데이터 출력엔 computed를 사용하니깐. 

[Udemy Vue 완벽가이드 Section2] 30. 감시자(Watcher) 활용하기

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.