[vue3] composition API

<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>