Vue 반응성.

ref, reactive, computed, watch, Proxy 기반 반응성 시스템

Vue 3 반응성은 Proxy로 객체를 감싸고, 의존성 추적(dependency tracking) 으로 값이 바뀔 때 관련 UI만 다시 그립니다.

📘 핵심 API

API	용도
`ref`	원시값, 단일 값 반응형
`reactive`	객체/배열 반응형
`computed`	파생 상태, 캐시
`watch` / `watchEffect`	side effect, 비동기

import { ref, reactive, computed, watch } from 'vue';

const count = ref(0);
const user = reactive({ name: 'mason' });
const double = computed(() => count.value * 2);

watch(count, (next) => {
  console.log(next);
});

🔄 동작

Vue 반응성 getter 추적과 setter 트리거

ref/reactive로 reactive proxy 생성
render/computed 실행 중 getter 접근 → 의존성 등록
setter로 값 변경 → 관련 effect(렌더, watch, computed) 스케줄
다음 tick에 DOM patch

ref는 .value로 접근, template에서는 자동 unwrap
reactive는 객체 전체 교체 시 참조를 바꿔야 함 (Object.assign 또는 새 객체)
computed는 getter만, setter는 computed({ get, set })로 명시
React useState와 달리 mutable 객체를 그대로 수정 가능

🔗 참고 자료

Reactivity Fundamentals — ref, reactive 기본 사용법을 설명한다.
Reactivity in Depth — Proxy 기반 의존성 추적 원리를 설명한다.
Computed Properties — 캐시되는 파생 값을 설명한다.