[Vue] setup()

✍🏻 setup()

• setup()함수는 Composition API 사용을 위한 진입점 역할을 한다. setup()함수 안에 반응형 상태나 메소드 이러한 것들을 선언하고 객체로 반환(return)하면 <template>에 노출 할 수 있다.

<template>
	<p>{{ counter }}</p>
</template>

import { ref } from "vue";
export default {
	setup() {
		const counter = ref(0);
		return {
			counter,
		};
	},
};

• 이렇게 counter로 선언하고 return으로 반환하여 template에 출력할 수 있다. return을 하지 않으면 사용할 수 없다.
  
  
  

<template>
	<p>{{ counter }}</p>
  	<!-- 버튼 클릭 시 p태그의 counter이 하나씩 올라 간다. -->
	<button @click="increment">click!</button>
</template>

import { ref } from "vue";
export default {
	setup() {
		const counter = ref(0);
		//메소드 선언
		const increment = () => {
			counter.value++;
		};
		return {
			counter,
			increment,
		};
	},
};

• 메소드를 선언해서 template안에서 사용할 수 있다.
  
  

1 setup() 함수의 매개변수

1-1 ✨props

• setup()함수의 첫번째 매개변수는 props다. props는 객체를 구조 분해 할당을 하면 반응성을 잃게 된다. 따라서 props.xxxx형식으로 props에 액세스하는 것이 좋다,

1-2 ✨context

• setup()함수의 두번째 매개변수 context객체다. setup함수내에서 유용하게 사용할 수 있는 속성을 가지고 있다.