vue3 computed

Question

si입사한지 4개월정도 된 신입개발자입니다. const a&#61; computed(() &#61;> store.getters.data); const b&#61; computed(() &#61;> store.getters.imaging); const c&#61; computed(() &#61;> store.getters.validPosition); const d&#61; computed(() &#61;> !!a.value?.current~ ?.intrrpt_~ ); (~은 변수명은 줄여쓴 것 입니다)지금 상황은 웹소켓으로 데이터를 가져온 후 약간의 전처리? 후 store.getters.data 이것을 통해서 가져오는데,나머지 getters인 imaging과 validPosition 은 store내부에서 data 에서 값을 통해서 가져오는 것이고 코드 상에 보시는 것처럼 변수 d도 결국 a의 종속되서 가져오는 것입니다.제가 드는생각은 d를 가져올때a가 정의되지 않앗다고 에러가 나오지 않을까 생각하다가 그럼 store에서도 저 getter 할 시 다 종속되어서 문제가 있지 않을까 생각이 들었습니다. (살짝 비동기 순서문제? 쪽이지 않을까 생각하고있습니다만...)구글서치 후에도 쉽게 해답이 안 나와 질문드립니다. 애초에 이런식으로 코드를 짜면 비효율적인가요? 아님 다른 방법이 있나요? 상관이 없을까요?(참고로 vue를 배운지는 얼마안되어 지금 열심히 배우고 있습니다)

Clickin · Answer

그냥 값을 바로 가져오는거면 computed의 의미가 별로 없지 않을까요vue 공식문서를 참조하면https://ko.vuejs.org/guide/essentials/computed계산된 캐싱 vs 메서드표현식에서 메서드를 호출하여 동일한 결과를 얻을 수도 있습니다:template

js// 컴포넌트 내에서 function calculateBooksMessage() { return author.books.length > 0 ? 'Yes' : 'No' }~~그러나 차이점은 계산된 속성은 의존된 반응형을 기반으로 캐시된다는 점입니다store.getters.data 가 가능한 경우의 수가 적어서 캐싱 이점이 있거나 하지 않는 이상 그냥 바로 접근하는 게 낫다고 봅니다.

ZERO개발자 · Answer

computed 쓰는 이유는 보통 특정 조건에 따라 보여줄 데이터를 변경하기 위해서 사용합니다.그냥 3항 연산하고 비슷하다고 생각하시면 될 듯하네요.(조건)?'참일 경우 보여줄 데이터' : '거짓일 경우 보여줄 데이터'그래서const a&#61; computed(() &#61;> store.getters.data); const b&#61; computed(() &#61;> store.getters.imaging); const c&#61; computed(() &#61;> store.getters.validPosition);는 필요 없는 처리라고 생각됩니다.const d&#61; computed(() &#61;> !!a.value?.current~ ?.intrrpt_~ );a가 아니라 store.getters.data 로 변경하시면 될듯하네요.vue3 개발했을 때 computed를 너무 많이 사용하는 것은 성능에 영향이 있다고 vue 가이드에서 본거 같네요.

MungGaeDev · Answer

!! <- 해당 값을 bool로 바꿈?. (Optional Chaining) 뒤에 값이 없을때 에러 안나게 undefined 처리 d를 가져올때a가 정의되지 않앗다고 에러가 나오지 않을까 >> Optional Chaining때문에 안뜸. 해당 값이 없다면, falsea가 없어도 false비효율 적인가?>> 저라면 저렇게 안짜긴 할겁니다만, 룰이 정해져 있다면 딱히 상관 없어 보입니다.다른 방법은 많습니다.

Kunie · Answer

모든 vue 의 reactivity 는 proxy 객체를 통하기 때문에, computed 로 여러번 참조하더라도 의존하는 값에 대하여 모두 동기적으로 계산됩니다(예외는 있습니다). 비동기로 동작하는 것은 랜더링하는 과정이죠. 다만, computed 를 무분별하게 사용하는 것은 별로 좋지 않습니다. 계산된 값이 메모리에 올라가기 때문이죠.

vue3 computed

4개의 답변

Q&A 목록