[핵심만 골라 배우는 Vue.js by 수코딩] 4. 반응형API(Reactivity APIs)- Options API vs Composition API

Reactivity APIs

반응형 API	반응형 데이터를 다루기 위한 핵심 함수
	호출방법	Options API	Composition API	설명
		Vue2 부터 사용 vue 내부에서 자동사용	Vue 3 새롭게 도입(권장) 사용자가 직접  사용
	코드사용순서	// 1.  import문 없음 export default {   name: '',       // 컴포넌트 이름   components: {},// 자식 컴포넌트    directives: {},   // 커스텀 디렉티브   // 2. defineProps, defineEmits   props: {},    // 부모 받는 데이터   emits: [],    // 부모 보낼 이벤트   // 3. provide, inject   provide() { // 하위 컴포넌트 제공     return {}   },   inject: [],  // 상위 컴포넌트 주입   //4. data(ref, reactive)   data() {     return {}   },   // 5. compute   computed: {},        // 계산된 속성   // 6. method   methods: {},         // 메서드(순서)   // 7. watch   watch: {},           // 감시자 (순서)   //8. lifecycle hooks (반응형api 아님) }	<script setup> // 1.  import문 import {   ref, computed, watch, reactive, provide, inject,   onBeforeMount, onMounted, onBeforeUpdate, onUpdated,   onBeforeUnmount, onUnmounted } from 'vue' // 2. props , emits const props = defineProps({ msg: String }) const emit = defineEmits(['submitted']) // 3. provide, inject provide('theme', 'dark') const theme = inject('theme') // 4. ref, reactive const title = ref('Composition API 예제') const inputValue = ref('') const state = reactive({ changed: false }) // 5. compute const reversed = computed(() => inputValue.value.split('').reverse().join('')) function submit() {   emit('submitted', inputValue.value)   console.log('제출:', inputValue.value) } // 6. watch, watchEffect (순서) watch(inputValue, (n, o) => {   console.log('변경:', o, '→', n)   state.changed = true }) // 7. method, 함수 (순서) function 함수명() {} //8. lifecycle hooks (반응형 api 아님) </script>
	ref	data()	import { ref } from 'vue' const count = ref(0)	- 반응형 기본 데이터 타입(숫자, 문자열)
	reactive	data()	import { reactive } from 'vue' const state = reactive({   count: 0,   name: '홍길동' })	- 반응형 객체
	computed	export default {   name: 'AddressInput',   data() {     return {       gu: '',       dong: ''     }   },   computed: {     address: {       get() {         return this.gu && this.dong ? `${this.gu} ${this.dong}` : ''       },       set(value) {         const parts = value.trim().split(/\s+/)         this.gu = parts[0] || ''         this.dong = parts[1] || ''       }     }   } }	import { ref, computed } from 'vue' // 구와 동을 개별 관리 const gu = ref('') const dong = ref('') // 구 + 동 조합된 주소 const address = computed({   get() {     // 둘 중 하나라도 비어 있으면 빈 문자열     return gu.value && dong.value ? `${gu.value} ${dong.value}` : ''   },   set(val) {     const parts = val.trim().split(/\s+/) // 공백 기준 분리     gu.value = parts[0] || ''     dong.value = parts[1] || ''   } })	- 반응형 계산된속성, 읽기전용 1. effect+lazy 관리 변할땜나 실행, 메모리캐시사용 같은메서드 여러번 호출해도 캐싱으로 한번만 호출 2. 기본데이터타입의 조합으로 정의, 해당 값을 변경하려면 set, get 으로 사용.
	watch	export default {   data() {     return {       address: '',       gu: '',       dong: ''     }   },   watch: {     address(newVal) {       const parts           = newVal.trim().split(/\s+/)       this.gu = parts[0] || ''       this.dong = parts[1] || ''     }   } }	<script setup> import { reactive, watch } from 'vue' const user = reactive({   name: '홍길동',   age: 20 }) watch(user, {   handler(newVal, oldVal) {     console.log('사용자 변경됨:', oldVal, '→', newVal)   },   deep: true,   immediate: true,   flush: 'post' }) </script> <template>   <input v-model="user.name" placeholder="이름" />   <input v-model="user.age" type="number" placeholder="나이" /> </template>	특정 반응형 데이터의 변화를 감지하여 특정 작업을 수행 1.Deep Watchers 객체 내부 속성까지 감지 - deep :true//깊은감시 2.Eager Watchers 변화 상관없이 감시 시작 시 한 번 즉시 실행 - immediate = true 3. Callback Flush Timing DOM 업데이트 이후에 실행 ('pre'는 기본값)  - flush : "post' handler 옵션 객체 감시를 설정할 때 사용하는 콜백함수
	$watch 인스턴스사용	export default {   data() {     return {       count: 0,       unwatchFn: null     }   },   mounted() {     // 인스턴스를 저장해서 나중에 중단 가능     this.unwatchFn = this.$watch(       'count',       (newVal, oldVal) => {         console.log('변경:', oldVal, '→', newVal)         if (newVal >= 5) {           console.log('감시 중단')           this.unwatchFn() // watch 중단         }       },       {         immediate: true       }     )   }	import { ref, watch } from 'vue' const count = ref(0) // 감시 인스턴스를 저장 const stopWatch = watch(count, (newVal, oldVal) => {   console.log('Count:', oldVal, '→', newVal)   if (newVal >= 5) {     console.log('감시 중단됨')     stopWatch()  // watch 해제   } })	성능 관리 필요 없는 감시를 중단해 리소스 절약 *  stopWatch()   호출이 감시를 중지함.
	watchEffect	없음	import { ref, watchEffect } from 'vue' const address = ref('') const gu = ref('') const dong = ref('') watchEffect(() => {   const parts        = address.value.trim().split(/\s+/)   gu.value = parts[0] || ''   dong.value = parts[1] || '' })	watch와 비슷 하지만, 내부에서 읽힌 모든 반응형 값 자동 추적