Vue 3 Composition API — Setup 함수와 Reactivity 이해

ref vs reactive

import { ref, reactive } from "vue";

const count = ref(0);  // 원시 값
const state = reactive({ name: "Kim", age: 30 });  // 객체

count.value++;  // ref는 .value 필요
state.age++;    // reactive는 직접 접근

computed

const fullName = computed(() => `${state.firstName} ${state.lastName}`);

watch

watch(count, (newVal, oldVal) => {
  console.log(`Changed: ${oldVal} → ${newVal}`);
});