Setup()
setup함수는 CompositionAPI 사용을 위한 진입점 역할을 한다. 그리고 이 함수는 인스턴스가 생성되기 이전에 실행이 된다.
created 되기 이전에 setup함수가 실행된다.
template과 setup함수와의 관계
<template>
<div>
<p>{{ counter }}</p>
<p>{{ message }}</p>
<button @click="increment">click!</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const counter = ref(0);
const message = ref('Hello Vue3');
const increment = () => {
counter.value++;
};
return {
counter,
message,
increment,
};
},
};
</script>
<style lang="scss" scoped></style>
JavaScript
복사
setup 함수에서 반환되는 counter, message, increment 는 template에서 사용이 가능하다.
!! 버튼 내부 @click 으로 함수를 바인딩 할 수있다 !
•
확인
이렇게 작동이 된다. (14번 클릭함)
setup함수가 받는 매개변수
props와 context
export default {
setup(props, context) {
// 속성 ($attrs와 동일한 비반응형 객체)
console.log(context.attrs)
// 슬롯 ($slots에 해당하는 비반응성 객체)
console.log(context.slots)
// 이벤트 발생 ($emit에 해당하는 함수)
console.log(context.emit)
// Public한 속성, 함수를 외부에 노출시에 사용
consoel.log(context.expose)
}
}
JavaScript
복사
setup함수는 속성인 props 매개변수와 context를 받을 수 있다.
props는 반응형 변수이다.
context는 다양한 기능을 가지고 있어서, 여러가지 활용도가 높다.