Vue Computed vs Watch 차이점 정리

반응형

 

Vue에는 Computed, Watch, Mehtods 속성을 언제 사용하면 좋을지 정리입니다.

헷갈릴 수도 있지만, 언제 사용하면 좋을지 알아두시면 유용합니다.

1. Computed

  • 오직 데이터 바인딩에서만 사용
  • 데이터가 변경될때 실행
  • 다른 데이터 값에 의존하는 데이터에 사용
 

Vue Computed란? 사용 해야 하는 이유

Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다. computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다. Computed는 언제 사용해야 하는가? {{ price +

powerku.tistory.com

2. Watch

  • 템플릿에 직접 사용 X
  • 데이터 변경이 일어나고  부수적인 Side Effect 발생이 필요할때 사용(Http Request 호출, setTimeout 타이머, 로컬스토리지 저장 등등...)
  • 주로 데이터가 아닌 API 호출을 하여 데이터 값의 변경이 필요할 때 사용
 

Vue Watch 속성 사용 언제 사용하는 것이 좋을까?

Vue에서 감시자(Watch) 속성이 있습니다. Vue watch 란? watch 속성은 데이터를 감시하고 있고, 데이터가 변경이 될 때, 정의된 함수를 실행합니다. watch 사용방법 data의 정의한 message를 watch 속성 안에 넣

powerku.tistory.com

3. Methods

  • 이벤트 / 데이터 바인딩에서 사용
  • 새로 렌더링 될 때마다, 실행 돼야 하는 데이터 바인딩
  • 매번 새롭게 계산이 필요한 데이터나 이벤트에 사용

 

728x90
반응형