728x90

Computed

자동으로 값을 변경하고 캐싱해주는 반응형 getter(setter도 이용 가능)

1. 템플릿 내 표현식을 직접 작성

너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 

2. computed를 이용

message에 의존하는 것을 알고 있기 때문에 message가 바뀔 때 reversedMessage에 의존하는 바인딩을 모두 업데이트할 것입니다.
computed 속성의 getter 함수는 사이드 이펙트가 없어 코드를 테스트하거나 이해하기 쉽습니다.
computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것입니다. 즉, reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다.

3. method를 이용

메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행합니다. 이 속성을 계산하려면 거대한 배열을 반복해서 다루고 많은 계산을 해야 합니다. 이렇게 불필요한 계산을 반복하는 것보다는 computed를 사용하는 것이 개발공학적으로 훨씬 이득이라고 생각이 듭니다.

Watch

Vue instance의 특정 프로퍼티가 변경될 때 실행되는 반응형 callback

debounce와 capitalize는 lodash에서 제공하는 기능입니다.

위 코드에서 볼 수 있듯, question에 들어오는 input을 감지하고 getAnswer method를 실행시켜 '?'가 포함되어 있는지 감지하거나 API를 호출해 답변을 얻습니다.
watch 옵션을 사용하면 비동기 연산 (API 엑세스)를 수행하고, 우리가 그 연산을 얼마나 자주 수행하는지 제한하고, 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있습니다. computed 옵션은 위 기능을 수행할 수 없습니다.
watch 옵션은 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다.

Usage

computed로 작성이 되는 경우에는 무조건 computed로 작성할 것(이 경우 computed가 거의 옳다)
watch로 작성할 경우 코드의 복잡성이 증가할 수 있음.

하지만, 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에는 watch를 사용하는 것이 유용합니다. 저는 실무에서 특정 기능이 실행되면 반드시 어떤 함수를 실행시켜줘야할 때 사용했습니다. computed와 watch는 고급 Vue 프로그래밍을 하기 위해 반드시 익혀야할 옵션입니다.

'Vue.js(Nuxt.js)' 카테고리의 다른 글

Life Cycle  (0) 2022.01.09

+ Recent posts