[Vue] Watch, Computed 차이점

728x90

method는 주로 두가지 경우에 사용

1. 데이터 바인딩

2. 이벤트 바인딩

데이터 바인딩을 위해 메서드를 사용하는 경우

즉, 중괄호 사이에 메서드를 사용해 템플릿에서 vue 인스턴스로 아웃소싱하는 경우 메서드는 컴포넌트 리렌더링 주기에 맞춰 매번 실행됨

그러므로 변동 사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 모든 메서드를 다시 호출하게 됨

그래서 이벤트 바인딩 시에는 method를 주로 사용하게 되는 것

computed(연산) 프로퍼티는 데이터 바인딩에만 쓰임

이벤트 바인딩에는 알맞지 않음

게다가 연산 프로퍼티는 다른 데이터를 기반하는 데이터를 가져오기에 유용하여 의존하는 데이터가 바뀔 경우에만 vue에 의해 재평가되거나 재실행 된다는 장점이 있음

즉, computed는 디펜덴시로 내부에 쓰인 데이터가 변경될 경우에만 재실행 (리엑트 useEffect와 유사한 기능인듯)

watch(감시자)는 템플릿에 직접 사용하지 않음

템플릿 내부에서 참조하지 않지만 computed를 포함해 어느 프로퍼티든 watch로 감시 가능함!

게다가 데잉터 변경에 대한 반응을 코드로 실행 가능

예를 들어 http 요청을 보내거나 타이머를 설정하거나 로컬스토리지에 데이터를 저장하는 작업 등이 있음

주로 데이터가 아닌 업데이트에 watch를 사용해야 함.

바뀌는 데이터를 토대로 데이터가 아니라 내부에서 업데이트하는 작업이 있을 경우 사용

watch보다는 computed를 사용하는것이 좋다고 함.
watch로 구현할 경우 중복 계산이 일어나거나 코드 복잡도가 높아지기도 하고, 공식문서에서도 대부분의 경우 watch보다는 computed가 더 적합하다고 함

📝 Summary

method	- 이벤트 바인딩 - 컴포넌트 렌더링 주기에 맞춰 매번 실행
computed	- 데이터 바인딩 - 의존 데이터 변경 시에만 재실행
watch	- 템플릿에 직접 사용 X - 바뀌는 데이터를 토대로, 데이터가 아니라 내부에서 업데이트하는 작업이 있을 경우 사용 - 감시하려는 프로퍼티 이름을 사용

🛠️ Reference

728x90

티스토리툴바