composition api Test Code

Vue 3.0에서 가장 기대하는 부분은 Typescript 지원도 있지만 개인적으로는 Composition api 이다
그래서 알아보는중 지금 사용하고있는 버전 2.6에서도 사용할수가 있었다

에반유가 리액트 hooks에서 영감을 받아서 만들었다고 한다.

기대하는 이유는 프로젝트에서 개발시 컴포넌트를 잘 세분화 한다하여도 개발을 하다보면 한 콤포넌트 내에 많은 처리가 
method , data에 구현하게 된다

이부분을 몬가 구룹화 시키기 위해 많은 고민을 하였고 결국엔 mixin으로 처리를 하였으나 몬가 한구석 이건 아닌데라는 생각이 있었다.
그러던중 react의 hook을 알게되었고 내가 원하는 부분이 리액트의 hook으로 처리가 가능하였다

그래서 vue 3 major 업그레이드에서 리액트 hook에서 영감을 받은 composition api가 제공 된다기에 기대하였는데
미리 사용할수있게 제공된다해서 test code를 작성해 보았다

아래 소스를 보면 알겠지만 함수로 그룹화를 지어서 사용할수가 있다
기존 method , data에 구분없이 나열 되었단 함수나 state를 그룹화 함으로서 가독성 및 관리에 많은 이점이 있다.

<template>
  <div ref="root"> 
      <h3>{{title}}</h3>
      <div> count : {{count }} , double : {{double}} , object : {{ object.foo }}</div>
      <button @click="increment">증가</button>
  </div>
  
</template>

<script>

import { reactive ,ref,computed,onMounted,onUpdated,onUnmounted} from "@vue/composition-api";
const increase = ()=> {
    
    const count = ref(5)
    const double = computed(() => count.value * 2)
    
    const increment = () => {
      count.value++;
    }
    return {count,double,increment}; 
}
export default {
  
  data(){
    return {
        title:'Composition API Test'
    }
  },
  onRenderTriggered(e) {
    debugger
    // inspect which dependency is causing the component to re-render
  }
  ,setup() {
    
    const root = ref(null);
    const {count,double,increment} = increase()
    const object = reactive({ foo: 'bar' })

    onMounted(() => {
      console.log('mounted!');

      // the DOM element will be assigned to the ref after initial render
      console.log(root.value); // <div/>

      increment();
      count.value++;
      object.foo = 'bar2';
    })

    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })

    return {
      count,
      double,
      increment,
      object,
      root,
    }
  }
}
</script>

 

test source
https://github.com/hiphopddori/VueComponentTest/blob/ver2/src/views/CompositionTest.vue

hiphopddori/VueComponentTest

참조 사이트
https://vue-composition-api-rfc.netlify.com/#summary

Composition API RFC | Vue Composition API

https://github.com/vuejs/composition-api

vuejs/composition-api

why the composition API
https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

Why the Composition API - Vue 3 Essentials | Vue Mastery