SFC(싱글 파일 컴포넌트) 컴포지션 API 환경에서 더 쉽게 읽거나 사용하기 위한 컴파일 문법
script 선언 시 setup 작성
<script setup>
console.log('안녕, script setup!');
</script>
컴포넌트를 처음 가져올 때 한 번만 실행하는
<script>와 달리,<script setup>내부의 코드는 컴포넌트 인스턴스가 생성될 때마다 실행
props 선언하는 부분 return 부분
<!-- MyBook.vue -->
<template>
<div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
<button @click="incresement">incresement</button>
</template>
<script>
import { ref, reactive } from "vue";
export default {
props: {
collectionName: String,
},
setup(props) {
const readersNumber = ref(0);
const book = reactive({ title: "Vue 3 Guide" });
const incresement = () => {
readersNumber.value += 1;
};
// expose to template
return {
readersNumber,
book,
incresement,
};
},
};
</script>
<!-- MyBook.vue -->
<template>
<div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
<button @click="incresement">incresement</button>
</template>
<script setup>
import { ref, reactive } from "vue";
const props = defineProps({
collectionName: String,
});
const readersNumber = ref(0);
const book = reactive({ title: "Vue 3 Guide" });
const incresement = () => {
readersNumber.value += 1;
};
</script>