computed 해부: 계산된 속성

핵심 개념

computed()는 반응형 의존성을 추적하는 캐시된 계산 속성입니다. 의존 데이터가 바뀔 때만 재계산합니다. computed를 지우며 자동 계산이 어떻게 멈추는지 확인하십시오.

코드 분석

VUE📋 코드 (19줄)



const{createApp,ref,computed}=Vue;
createApp({
  setup(){
    const units=ref([{model:'T-800',threat:8},{model:'T-1000',threat:10},{model:'T-X',threat:9},{model:'T-600',threat:6}]);
    const filter=ref(0);
    const filtered=computed(()=>units.value.filter(u=>u.threat>filter.value));
    const avgThreat=computed(()=>filtered.value.length?(filtered.value.reduce((s,u)=>s+u.threat,0)/filtered.value.length).toFixed(1):'0');
    return{units,filter,filtered,avgThreat};
  },
  template:`<div>
    <div style='margin-bottom:8px;font-size:11px;'>
      최소 위협도: <input v-model.number='filter' type='range' min='0' max='10' style='vertical-align:middle;'> {{filter}}
    </div>
    <div style='color:#f59e0b;font-size:11px;margin-bottom:8px;'>평균 위협도: {{avgThreat}} ({{filtered.length}}개)</div>
    <div v-for='u in filtered' :key='u.model' style='font-size:11px;color:#888;margin-bottom:4px;'>▶ {{u.model}} — {{u.threat}}</div>
  </div>`
}).mount('#comp-out');

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Vue 3 'computed' 코드에서
반응성 시스템 관련 버그와 watch 누수를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'computed'를 활용한 실전 Vue 컴포넌트를
Composition API + script setup 문법으로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Vue 'computed' 사용 패턴 전체를 분석하고
번들 크기·렌더링 성능·반응성 효율을
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Vue 3 'computed'가 React의 대응 기능 대비
어떤 장단점이 있는지 솔직하게 평가하고
실무 선택 기준을 알려줘.

⭐ 이것만 기억하세요

computed 해부: 계산된 속성은 이 3가지만 확실히 잡으세요

1.템플릿 안에 복잡한 계산식을 넣으면 가독성이 떨어지고, 매 렌더링마다 불필요하게 재계산됩니다

2.computed는 의존하는 반응형 데이터가 바뀔 때만 재계산되며, 결과를 캐싱해서 성능에 유리합니다

3.다음 챕터에서 데이터 변경에 반응해 부수 효과를 실행하는 watch와 watchEffect를 배웁니다

💬 이 챕터 질문 보기

VUE · CH.11 — 질문하거나 답변을 확인하세요

→

진행도 11 / 34

← 커리큘럼으로 ← 목록으로 (Vue 3)