[Vue.js] Methods / Computed / Watch

호랭이·2023년 1월 4일

🏄 Web

목록 보기
2/4

Methods

  • 데이터 바인딩, 이벤트 바인딩을 할 때 사용한다.
    (ex: 보간법에 사용할 데이터를 가져오기 위해 사용)

  • 메소드는 컴포넌트의 리렌더링 주기에 맞춰 매번 실행된다.
    즉 변동사항이 생기면 템플릿을 다시 불러오면서 해당 템플릿에서 호출되는 모든 메소드를 다시 호출한다.

  • 따라서 이벤트 바인딩 시에는 항상 메소드를 사용한다.

Computed

  • 데이터바인딩에만 쓰인다.
  • 다른 데이터를 기반으로 하는 데이터를 가져오기에 유용하다.
  • 다른 데이터에 의존하는 데이터에 사용한다.
  • 의존하는 데이터가 바뀔 때에만 다시 로드된다(연산 프로퍼티에 해당하는 데이터가 바뀔 때만)

Watch

  • 템플릿에 직접 사용하지 않는다.
  • 데이터 변경에 대한 반응을 코드를 실행할 수 있다.
    (ex: HTTP 호출, 타이머, 로컬 스토리지 저장 등)
  • 바뀌는 데이터를 토대로 데이터가 아닌 내부에서 업데이트하는 작업이 있을 때 사용한다.
profile
삐약

0개의 댓글