📚 Reference

• 공식 문서 1

📜 Chapter

watch

watchEffect

computed

• computed
• 반응형 계산을 정의한다. (파생 상태)
• computed는 Vue에서 데이터를 기반으로 계산된 새로운 값을 정의할 때 사용하는 속성이다.
• 이는 템플릿 내에서 복잡한 로직을 간결하게 표현하고, 성능 최적화에 도움을 준다.
• computed 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다.
• getter function를 사용하고 getter에서 반환된 값에 대한 읽기 전용 반응형 ref 개체를 반환한다.
• 또한 쓰기 가능한 참조 개체를 생성하기 위해 get 및 set 함수가 있는 개체를 사용할 수도 있다.

// read-only
function computed<T>(
  getter: (oldValue: T | undefined) => T,
  // see "Computed Debugging" link below
  debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>>

// writable
function computed<T>(
  options: {
    get: (oldValue: T | undefined) => T
    set: (value: T) => void
  },
  debuggerOptions?: DebuggerOptions
): Ref<T>

computed - 역할, 특징

• computed 속성은 반응형(Reactive) 데이터의 게터(Getter)로 작동하며, 다음과 같은 특징을 가진다.

자동 의존성 추적

• computed 함수 내에서 사용된 반응형 데이터(data, props, 다른 computed 값 등)에 자동으로 종속된다.
• 이 종속된 데이터 중 하나라도 변경되면, computed 속성도 자동으로 재계산 된다.