vue.js의 데이터 변경에 대응하여 비동기식 또는 고비용 작업을 수행하는 데 워처가 계산보다 나은 이유는 무엇입니까?

vue.js의 데이터 변경에 대응하여 비동기식 또는 고비용 작업을 수행하는 데 워처가 계산보다 나은 이유는 무엇입니까?

의 문서Vue.js다음과 같이 말합니다.

사용방법watch옵션을 사용하면 비동기 조작(API 액세스)을 실행하고, 그 조작의 빈도를 제한하며, 최종 답변을 얻을 때까지 중간 상태를 설정할 수 있습니다.그 중 어느 것 하나로는 불가능할 것이다.computed소유물.

같은 생각을 하고 있으면 알 수 있습니다.computed속성은 와 같은 함수를 사용합니다.watcher.

레퍼런스: https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

그래서 제 질문은 위의 문구를 뒷받침하는 기술적 이유와 우리가 사용하는 것을 제한하는 것이 무엇인가입니다.computed대신 속성watchers?

중요한 것은 어떻게 하면computed속성은 Vue에서 작동합니다.대부분의 경우 개발자가 Vue에 제공하는 것은 함수인 getter이며, 이것은 계산된 속성의 값이 어떻게 계산되는지를 정의합니다.

1. 언제?computedProp getter(사용자가 제공한 기능)가 실행 중이고 Vue는 다른 대응형 기능을 감시하고 있습니다.data결과가 어떤 데이터에 의존하는지 알 수 있도록 접근합니다.
2. Getter 결과가 Vue에 의해 캐시됩니다.
3. 의 값에 액세스 할 때마다computedProp, Vue 코드의 작은 청크가 실행됩니다.캐시에 값이 있는지, 값이 있는 경우 getter가 마지막으로 실행되었을 때 일부 입력이 변경되었는지 확인합니다.값이 있고 변경이 없는 경우 getter는 전혀 실행되지 않고 캐시된 값이 대신 반환됩니다.

질문 제목에 "비동기적 또는 고비용"이라고 기재되어 있습니다.

비싼.

고가의 계산은,computedgetter는 필요할 때만 실행되기 때문에 소품들이 필요합니다.그러나 이 기능은 변경 시마다 실행되지만 항상 원하는 것은 아닙니다.따라서 문서에서는 예를 들어 사용자가 입력한 값 스트림이 있고 사용자가 200ms 동안 멈춘 후에만 작업을 수행하고자 하는 사용 사례에 대해 설명합니다.또는 일부 데이터 스트림(원격 측정)이 있지만 2초마다 그래프만 업데이트하려고 합니다.

에서는 이 작업을 수행할 수 없습니다.computedVue는 getter가 매번 값을 반환하고 그 값이 나중에 사용할 수 있도록 캐시에 저장될 것으로 예상하기 때문입니다.

비동기

는 Vue를 .computed a getter를 선택합니다.에서 computedprop getter, 반환할 가치가 없거나(콜백에 기반한 비동기일 경우 - 그러나 JS 함수는 항상 무언가를 반환함) 미래 가치를 약속합니다.Vue는 당신의 기능의 결과를 받아들입니다.undefined또는 약속) 및 캐시에 저장합니다. 비동기화가 관련되어 비동기화가 관련되어 있습니다.watch★★★★★★★★★★★★...

계산된 속성은 다른 속성의 변경을 감시(관찰)하고 값을 반환하기 위해 이러한 속성을 기반으로 계산을 수행합니다. 반면 Watchcher 속성은 한 속성의 변경을 관찰하고 해당 속성에 기반한 논리를 실행하며 값을 반환하지 않습니다.

따라서 일부 계산을 수행한 후 값을 반환해야 하는 경우 calculated를 사용하고, 그렇지 않은 경우 속성 변경 후 일부 작업을 실행해야 하는 경우 watch를 사용해야 합니다.

Watcher 속성은 계산된 속성은 값을 반환하지만 Watcher 속성을 기반으로 계산된 속성은 사용할 수 없으므로 계산된 속성 변경을 관찰할 수 있습니다.

언급URL : https://stackoverflow.com/questions/63658276/why-watcher-is-better-than-computed-to-perform-asynchronous-or-expensive-operati