Vue3 Composition Api

Vue 3.x 의 가장 큰 변경(추가)점인 Composition Api 를 사용하면서 알게된 사용법과 장점 및 단점을 작성해본다.

Composition Api

Composition Api는 옵션 사항 필수로 적용되어야 하는 기능은 아님..!

Composition Api 사용법

<script>
export default{
    data(){
    	return{
        	age:29
        }
    },
    setup(){
    	const name = "dawoon";
        return{
        	name
        };
    }
}
</script>

기존 Vue의 선언 방식과는 다르게 setup hook을 사용하고 내부에서 작성된 함수와 변수는 return 하여
template 영역에서 사용한다.

setup 함수에 데이터들이 그루핑 되어 관리가 되다 보다 용의하게 데이터의 흐름을 파악 할 수 있다.
또한 반복되는 코드(필터링 등)를 별도로 작성하여 import 해서 사용 할 수있다 (mixin 비슷)

//composition.js
<script>
const composition = () => {

	const name = "dawoon";    
	return{name};
}

export default composition;
</script>
/**적용할 .vue**/


<script>
import composition from './composition'
......
  setup(){
        const {name} = composition();

        return { name };
  }
......
</script>
....

반응형 데이터

반응형 data 를 만들 때는 ref, reactive를 사용함

• ref
  - 함수로 값을 변경 할때 ref.value 로 바로 값을 넣어준다.
  - 원시값 (단순 변수 string,number 등) 과 같은 데이터도 적용 가능
• reactive
  - 함수로 값을 변경 할때 바로 값을 넣어줌
  - 원시 값에는 적용 할 수 없고 객체나 배열에만 적용 가능하다.
  

<script>
  import { ref, reactive } from "vue";

  setup(){
      const person1Ref = ref({name:"dawoon",age:29});
      const person2Ref = reactive({name:"dawoon",age:29});

      const dataHandler = () => {
          person1Ref.value.name = 'kim.D.W';
          person2Ref.name = 'kim.D.W';

      }
  }
</script>

Computed, watch

<template>
  <div class="home">
    <input type="text" v-model="search" />
    <p>{{ search }}</p>
    <div v-for="name in matchingNames" :key="name">
      {{ name }}
    </div>
  </div>
</template>
<script>
import { computed, ref, watch, watchEffect } from "vue";

export default {
  name: "HOME",
  setup() {
    const search = ref("");
    const names = ref(["qq", "aa", "zz", "dd"]);
    
    const matchingNames = computed(() => {
      return names.valie.filter(name => name.includes(search.value));
    });

    watch(search, () => {
      "search 값이 바뀔 때 마다 실행되는 함수";
    });

    watchEffect(() => {
      console.log(
        "search value가 정의됬기에 search가 바뀔때마다 실행된다",
        search.value
      );
    });

    return { names, search, matchingNames };
  }
};
</script>

Props,emit

setup 함수 선언 부에 인자로 작성한다.

<script>
import { computed, ref, watch, watchEffect } from "vue";

export default {
  name: "HOME",
  props:{
  'propsEx':number
  },
  setup(props,{emit}) {
  
  	const propsSetup = props.propsEx // 읽기 전용으로 props의 직접 적인 변형은 할 수 없음
    	const emitEx = () =>{
    	emit('emit-ex',{value:true})
    }
    // Emit 전달 <components @emit-ex="getFn($data)") />



    return { propsSetup, emitEx };
  }
};
</script>

lifeCycle

<script>
export default {
  // 사용할 props를 배열내에 정의합니다.
  props: ["posts"],
  setup(props) {
    onMounted(() => console.log("component mounted"));
    onUnmounted(() => console.log("component onUnmounted"));
    onUpdated(() => console.log("component onUpdated"));
    console.log(props.posts); // 받은 prop 사용가능
  }
};
</script>

useStore, useRouter

vuex, vue-router 를 Composition Api 변수로 선언하여 사용 할 수 있음 React hook의 방식과 유사함

<script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
  setup(props) {
  	
    const store = useStore();
    const router = useRouter();
    
    const storeState = store.state.data;
    
    const moveRouter = () =>{
    	router.push('/home')
    }

  }
};
</script>

Vue 의 Script 구문의 모든 기능 (data, methods, lifeCycle, computed 등) 을 대체 가능한 것 같은데

위 기능 모든 것을 Composition API 로 사용하는것에 대한 고찰?

장점

• data 와 methods 영역이 따로 분리가 되어있지 않기 때문에 코드에 가독성이 올라간다

• 리엑트와 Vue 의 유사? react hook 과 개념이 비슷해지기 때문에 react 사용자가 vue 를 사용할때 좀더 쉽게 전향 가능할듯 (반대도 가능)

• 재사용성) Vue의 mixin 을 대체 하여 사용할 수 있을 것 같음
  순수 script 의 형식을 가지기 때문에 타입스크립트를 적용하기 용의함

단점

• setup에 너무 많은 기능을 몰아 줬을때의 문제점?
  - 문제점은 없지만 너무 많이 몰아 넣었을때 오히려 가독성이 떨어짐... 결국 클래식한 구조도 함께 쓰는 것이 좋은 것 같음

• 기존 vue 와 전혀 다른 구조

• 기능적인 오류가 있을지 확실하지 않음