1. Composition API
1.1. Composition API
컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 하는 함수 기반의 API
ex) 숫자 2개를 입력받아 더해서 출력하는 코드
1) 컴포지션 x
<template>
<div>
<h2>Calculator</h2>
<div>
<input type="text" v-model="num1" @keyup="plusNumbers" />
<span> + </span>
<input type="text" v-model="num2" @keyup="plusNumbers" />
<span> = </span>
<span>{{result}}</span>
</div>
</div>
</template>
<script>
export default{
name: 'caculator',
data(){
return {
num1: 0,
num2: 0,
result: 0
};
},
methods: {
plusNumbers(){
this.result = parseInt(this.num1) + parseInt(this.num2);
}
}
}
</script>
2) 컴포지션 API의 reactive 이용
<template>
<div>
<h2>Calculator</h2>
<div>
<input type="text" v-model="state.num1" />
<span> + </span>
<input type="text" v-model="state.num2" />
<span> = </span>
<span>{{state.result}}</span>
</div>
</div>
</template>
<script>
import {reactive, computed} from 'vue';
export default{
name: 'calculator',
setup(){
let state = reactive({
num1: 0,
num2: 0,
result: computed(() => parseInt(state.num1) + parseInt(state.num2))
});
return{
state
}
}
}
</script>
setup(): Composition API에서 컴포넌트의 로직을 정의하는 함수
- setup 함수 내부에서 반환된 값을 템플릿에서 사용할 수 있음
reactive: 반응형 데이터 객체를 생성함
- 객체의 속성이 변경되면 이를 사용하는 템플릿이나 계산 속성이 자동으로 업데이트됨
- 데이터 객체 state를 생성(num1, num2, result 포함)
*reactive와 computed의 차이점
1) reactive
객체를 반응형 데이터로 변환
- 객체 내의 모든 속성이 반응형이 됨
- 데이터가 변경되면 자동으로 이를 사용하는 컴포넌트나 템플릿이 업데이트됨
2) computed
기존 데이터로부터 계산된 값을 정의
- 기본 데이터가 변경될 때 계산된 값도 자동으로 업데이트
- 새로운 값 계산, 파생된 데이터 처리
3) 코드 분리
<template>
<div>
<h2>Calculator</h2>
<div>
<input type="text" v-model="state.num1" />
<span> + </span>
<input type="text" v-model="state.num2" />
<span> = </span>
<span>{{state.result}}</span>
</div>
</div>
</template>
<script>
import {reactive, computed, toRefs} from 'vue';
function plusCalculator(){
let state = reactive({
num1: 0,
num2: 0,
result: computed(() => parseInt(state.num1) + parseInt(state.num2))
});
return toRefs(state);
}
export default{
name: 'calculator',
setup(){
let {num1, num2, result} = plusCalculator();
return {
num1, num2, result
}
}
}
</script>
toRefs(): reactive 객체의 속성을 반응형 참조(ref)로 변환하여 반환
- 반환된 값은 객체의 속성이 아니라 vue의 ref처럼 동작함
- 반응형으로 선언된 num1, num2, result가 외부 function에서 정상적으로 동작하기 위해서는 toRefs를 사용해야 함
1.1.4. Provide/Inject
2. 믹스인
3. CustomDirectives
커스텀 디렉티브
const app = createApp(App);
app.directive('focus', {
mounted(el){
el.focus()
}
})
<input type="text" v-focus />
'vue.js' 카테고리의 다른 글
[Vue] 기초 응용 key-value 객체 (0) | 2025.02.18 |
---|---|
[vue.js] Vuex (0) | 2025.01.09 |
[vue.js] 컴포넌트 심화 (0) | 2025.01.08 |
[vue.js] 컴포넌트 기초 (0) | 2025.01.08 |
[vue.js] 캘린더에 한국 공휴일 등록 (0) | 2024.11.13 |