Composition API

 

---

정의

---

• 컴포넌트 로직을 유연하게 구성할 수 있는 API의 모음
• 로직의 재사용성과 가독성을 높여줌
• 하나의 기능에 대한 코드들이 data, methods, computed, … 에 각각 흩어진 로직을 모아줌
• 인스턴스 옵션 단위가 아닌 기능이나 논리 단위의 코드로 그룹화 하는것

Setup

---

컴포넌트가 생성되기 전에 props가 반환 되면 실행되는 컴포넌트 옵션으로 진입점 역할

setup()에 전달된 인자에 대한 타입을 추론하려면, defineComponent를 사용

• composition api 사용 비교
  • 사용 전

  • ...
    <script>
    export default {
      data () {
        return {
          count: 0
        }
      },
      computed: {
        CountWithUnit () {
          return this.count + '입니다'
        }
      },
      methods: {
        increase () {
          ++this.count
        },
        decrease () {
          --this.count
        }
      }
    }
    </script>

  • 사용 후

  • ...
    <script>
    import { ref, computed } from '@vue/composition-api'
    
    const useCount = () => {
      const count = ref(0)
      const countWithUnit = computed(() => count.value + '입니다')
      
      const increase = () => ++count.value
      const decrease = () => --count.value
      
      return { countWithUnit, increase, decrease }
    }
    
    export default {
      setup () {
        const { countWithUnit, increase, decrease } = useCount()
        
        return  {
          countWithUnit,
          increase,
          decrease
        }
      }
    }
    </script>

반응형 데이터

1. reactive
   1. 오직 객체만을 인자로 받음
   2. 이자로 받은 객체와 완전히 동일한 프록시 객체를 반환(원본 내부에 Vue옵저버만 추가하여 그대로 반환)
   3. 생성된 객체는 Vue.observable()로 생성한것과 동일
2. ref
   1. 모든 원시(primitive) 값을 포함하여 여러 타입을 인자로 받음
   2. 원본값은 ref객체의 value속성을 통해 접근, 조작 가능
   3. 템플릿에 사용하는경우는 value속성 접근 불필요( <p> {{ refValue }} </p> )

computed, watch

기존의 computed, watch 속성 또한 compositionAPI로 사용

...
import { ref, computed } from '@vue/composition-api'

export default {
  setup () {
    const myValue = ref(10)
    const value2x = computed(() => myValue * 2)
    watch(myValue, (newVal, oldVal) => {
      // myValue값이 변경되는 경우 로직
    }, { deep: true })
    
    return {
      value2x
    }
  }
}

Vue2 Life Cycle과 비교

또한 기존에는 컴포넌트당 하나의 생명 주기 훅을 사용했지만,

컴포지션 API를 사용할 경우 여러개로 나누어 사용할 수 있습니다.

vue2Composition API

beforeCreate	setup
created	setup
beforeDestory	onBeforeUnmount
destroyed	onUnmounted
etc(나머지 life cycle hook)	onEtc

import {
  onMounted,
  onUpdated
} from '@vue/composition-api'

// 여러개의 life cycle 훅을 나누어 사용 가능
const mounted2 = () => {
  onMounted(() => {
    //mounted2
  })
}

export default {
  setup () {
    onMonted(() => {
      // mounted
    })
    mounted2()
    
    onUpdated(() => {
      //updated
    })
  }
}