<template>
<div>
<p>Spaces Left: {{ spacesLeft }} out of {{ capacity }}</p>
<h2>Attending</h2>
<ul>
<li v-for="(name, index) in attending" :key="index">
{{ name }}
</li>
</ul>
<button @click="increaseCapacity()">Increase Capacity</button>
</div>
</template>
<script>
import { ref, computed } from "vue";
export default {
setup() {
// 변화 감지할 데이터 ref 로 묶음
const capacity = ref(4);
const attending = ref(["Tim", "Bob", "Joe"]);
const spacesLeft = computed(() => {
// ref 로 묶은 데이터 접근시 .value 사용해서 접근 해야함
return capacity.value - attending.value.length;
});
// 함수는 function으로 정의
function increaseCapacity() {
capacity.value++;
}
// 템플릿에서 해당값들을 접근 가능
return { capacity, attending, spacesLeft, increaseCapacity };
}
};
</script>
import { reactive, computed, toRefs } from "vue";
export default {
setup() {
// 반응성 값들을 object 로 반환
// ref와 다르게 .value로 접근할 필요 없음
const event = reactive({
capacity: 4,
attending: ["Tim", "Bob", "Joe"],
spacesLeft: computed(() => { return event.capacity - event.attending.length; })
});
function increaseCapacity() {
event.capacity++;
}
// toRefs로 반응성을 가지고 있는 일반 객체를 만듦
return { ...toRefs(event), increaseCapacity };
}
<template>...</template>
<script>
export default {
setup() {
const product = useSearch()
const result = useSorting()
return {product, result}
}
}
function useSearch(getResult) {
}
function useSorting({ input, options }) {
}
</script>