vue composition API를 쓰고난 후

Setup 훅에서 Route와 Router에 접근하는 법

options API

vue router를 App에 mount 시켜줘 mehods, computed등에서 this에 접근가능하여 this.$route 라던가 this.$router를 사용하여 접근하였음

- main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"

createApp(App).use(router).mount('#app');

Composition API 사용

setup 훅 내부에서 'this' 접근할 수 없기 때문에 useRouter를 import 하여 사용해야 한다.

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    }
  },
}

해당 컴포넌트에서만 필요할때만 vue-router나 vueRoute를 import 하기 때문에 장점이 있을 수 있을것 같다. 하지만 매번 import하여 사용하는건 귀찮음을 동반한다. 

 

 setup 훅이 아닌 <script setup>을 사용한다면 다음과 같은 이점이 있습니다. (공식 홈페이지 내용)

• 더 적은 상용구로 더 간결한 코드
• 순수 TypeScript를 사용하여 소품 및 방출된 이벤트를 선언하는 기능
• 런타임 성능 향상(템플릿이 중간 프록시 없이 동일한 범위의 렌더링 함수로 컴파일됨)
• 더 나은 IDE 유형 추론 성능(언어 서버가 코드에서 유형을 추출하는 작업 감소)

<template>
    <div>
        {{ title }}
    </div>
</template>

<script setup lang="ts">
    defineOptions({
        name: 'Temp',
    });

    const { title } = props;

    const props = defineProps({
        title: {
            type: String,
            default: '',
        },
    });
</script>

직접 사용해보았는데, script 태그를 이용하면 options API에서 사용하는 컴포넌트의 name을 사용하기 위해서는 Vue Macros 라이브러리를 이용하여 defineOptions로 정의할 수 있습니다.

defineProps로 상위 컴포넌트에서 전달받은 props로 사용가능합니다. template 안에서 list를 사용하기 위해서 props.list와 같이 사용할 수 있지만 props에 대한 내용이 많다면 깔끔하지 않을것 같아 구조분해 할당을 이용했습니다. composition API는 구조분해할당을 options API보다 비교적 많이 사용하였던것 같습니다. options API는 props에 접근하기 위해서는 <script> 태그 안에서는 this를 이용하였고, template에서는 바로 접근하였습니다.

 

 

 

참고:
- https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup

- https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/#watch-watcheffect-%E1%84%8C%E1%85%AE%E1%86%BC%E1%84%8C%E1%85%B5