[Vue3] Composition API

Vue 사용의 장점 중 하나는 기능과 함께 코드의 반복 가능한 부분을 추출 할 수 있다는 것입니다.

이는 코드의 유지 관리 가능성과 유연성을 향상시키는 데 큰 역할을하지만 응용 프로그램이 많은 구성 요소와 함께 커지면 더 어려워 질 수 있습니다.

 

Vue2에서는 데이터, 계산, 메서드, 시계와 같은 구성 요소의 옵션을 사용하여 논리를 구성합니다.

이 접근 방식은 성장된 구성 요소의 경우 코드를 읽고 이해하기 어렵게 만듭니다.

다음은 기본 Vue2 코드의 예입니다.

 

export default {
  components: { Component1, Component2 },
  props: {
    prop1: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      object 1,
      object 2
    }
  },
  watch: {
    prop1: 'method1' // 1
  },
  methods: {
    method1() {
     // implementation
  },
  mounted () {
   // implementation
  }
}

 

논리에 관계없이 다양한 코드 세그먼트가 여러 구성 요소 옵션에 흩어져 있습니다.

이러한 분리로 인해 독자가 코드 주위를 이동해야하기 때문에 논리적 인 관점을 기반으로 코드를 읽고 이해하기가 어렵습니다.

 

반응형

 

컴포지션 API는 논리적 인 관심사를 기반으로 코드를 공동 배치 할 수있게하여 솔루션을 제공합니다.

setup()옵션은 속성을 나머지 구성 요소에 반환하는 데 사용됩니다.

import { Component1} from '...'

// inside our component
setup (props) {
  let object1 = ''
  const method1 = () => {
    // implementation
  }

  return {
    object1,
    method1 // functions returned behave the same as methods
  }
}

 

코드의 다른 부분은 반환된 콘텐츠에 액세스할 수 있습니다.

설정 내에서 수명 주기 메서드, 계산 된 속성, 상태 데이터 등을 가질 수 있으므로 논리적 인 관심사별로 코드 세그먼트를 그룹화 할 수 있습니다.