[vue3] vue 2 > vue3

사용해야하는 이유

• 큰 컴포넌트의 가독성을 높임
• 뷰 2는 코드 재사용시 약점 있음
• typescript 지원 제한

가독성 문제점

vue2 문제점

• 검색창을 만드는 경우 vue2는 같은 정보를 여러 곳에 추가해야 함
• components, props, data, computed, methods, lifecycle methods ⇒ 6개의 옵션이 있음
• 아주 복잡함 !!! 한번에 두면 더 읽기 쉬울 것 같음

export default{
    data() {
        // search data
        // sorting 
    }
    methods:{
        // search data
        // sorting
    }
}

vue 3 해결책

• composition api 를 통해 새로운 구문을 만듦
• 단, 문제점이 있음
  • setup 에 다 넣는 경우 setup이 길어 질수 있음

export default {
    setup() {
        // search data
        // sorting
    }
}

• 해결책

export default {
    setup() {
        return { ...useSearch(), ...useSorting() }
    }
}
function useSearch() {
    // search data
}
function useSorting() {
    // sorting
}

컴포넌트 재사용의 문제점

vue 2 문제점- mixins

단점

• 변수명 충돌 가능
• 관계가 명확하지 않음
• 재사용 하기 어려움

const productSearchMixin = {
    data () {
        return {
                // search data
        }
    },
    methods: {
        // search func
    }
}

const resultSortMixin = {
    data() {
        return {
            // sorting data
        }
    },
    methods: {
        // sorting func
    }
}
export default {
    mixins: [productSearchMixin, resultSortMixin]
}

vue3 해결책

• 각각의 함수는 수정 가능한 mixins을 반환

장점

• 재사용 용이
• 관계가 분명해짐

단점

• 명확한 이름을 지정해 줘야함
• 복잡한 porperty 추가시 mixin 어떤 porperty가 보여지는지 알아야함

// mixins/factories/search.js
export default function searchMixinFactory({...}) {
    // search function
}

//  mixins/factories/sorting.js
export default function sortingMixinFactory({...}) {
    // sorting function
}

// search.vue
// 이 파일에서 위의 두개의 파일로 각각의 설정들을 보냄
import searchMixinFactory from '@mixins/factories/search'
import sortingMixinFactory from '@mixins/factories/sorting'

export default {
    mixins: [
        searchMixinFactory({
            namespace: 'productSearch'
        }),
        sortingMixinFactory({
            namespace: 'resultSorting'
        })
    ]
}

Mixins problem 해결책 - scoped slots

단점

• 들여쓰기 증가
• 노출된 properties 만 템플릿에서 사용가능하다
• 한 개 대신 세 개의 컴포넌트를 사용해야함 > 약간 귀찮음

// componets/generic-sorting.vue
<script>
export default {
    props: ['input','options'],

}
</script>
<template>
    <div>
        <slot v-bind ="{options, index,output}"/>
    </div>
</template>

// componets/generic-search.vue
<script>
export default {
    props: ['getSearch']
}
</script>
<template>
    <div>
        <slot v-bind="{query, results, rum}"/>
    </div>
</template>

// search.vue
<template>
    <GenericSearch :get-results="getProducts" v-slot="productSearch">
        <GenericSorting 
            :input = "productSearch.result"
            :options=resultSortingOptions"
            v-slot="resultSorting"
        >

vue3 의 composition api

장점

• 약간의 코드로 컴포넌트에 쉽게 넣을 수 있음
• 친숙한 코드
• mixins과 scoped slot 의 유연성 (함수에서만)

단점

• 배움이 필요함

// use/search.js
export default function useSearch(getResults) {
    // search func
}

// use/sorting.js
export default function useSorting({input, options}) {
    // sorting func
}

// search.vue
import useSearch form '@use/search'
import useSorting from '@use/sorting'
export default {
    setup() {
        const productSearch = useSearch(~)
        const resultSorting = useSorting({~~})

        return {productSearch, resultSorting}
    }
}

언제 composition api 사용하는가

• 컴포넌트가 너무 커지고 구조화를 원할때
• 컴포넌트 재사용 높임
• typescript support