| 반응형 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와 비슷
하지만, 내부에서 읽힌 모든 반응형 값 자동 추적 |
