소개

이번에는 새로 도입된 Composition API에 대해 설명합니다!

동영상에서도 코드 첨부로 해설하고 있으므로, 좋으면 시청 부탁드립니다!

【YouTube 동영상】 Composition API나 setup 함수의 사용법을 함께 봅시다!

Vue 2계와 3계의 쓰는 방법의 차이

Vue2계에서 컴포넌트를 만들 때 다음과 같이 쓰고 있었습니다.
정의 장소와 사용 장소가 떨어져 있기 때문에, 코드 점프 할 수 없으면, 읽는 것이 힘들네요 (할 수 있어도 보기 힘듭니다만...).

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  data () {
    return {
      repositories: [],
      filters: { ... },
      searchQuery: ''
    }
  },
  computed: {
    filteredRepositories () { ... },
    repositoriesMatchingSearchQuery () { ... },
  },
  watch: {
    user: 'getUserRepositories'
  },
  methods: {
    getUserRepositories () {
      // using `this.user` to fetch user repositories
    },
    updateFilters () { ... },
  },
  mounted () {
    this.getUserRepositories()
  }
}

이것이 Vue3계에서 이렇게 됩니다!
data라든지 없어진 대신에 setup 함수가 추가되어 있군요!

setup 함수내에 변수나 함수를 정의해, mounted나 methods에 대응하는 것을 써 갑니다.
setup 함수 덕분에 같은 데이터를 다루는 처리를 정리할 수 있습니다! !

또한 setup 함수의 끝에서 상수 등을 반환하면 template 내에서 처리 할 수 ​​있습니다.

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup(props) {
    const test = ...
    console.log(props) // { user: '' }

    // setup関数内で定義したものを外 (<template>など) で使えるようにreturn
    return { test, ... }
  }
  ...
}

비주얼로 정리하면 다음과 같습니다.
왼쪽이 지금까지의 Vue.js를 쓰는 방법이고 오른쪽이 Composition API를 사용했을 때의 쓰는 방법입니다.
이 이미지에서는 액세스하는 각 데이터에 대해 색상을 구분합니다.

비교 이미지 Vue Composition API #code-organization

data는 어디로 갔습니까?

data를 사용하지 않는 대신 ref와 reactive가 도입되었습니다!

예를 들면 다음과 같이 사용합니다.

import { ref } from 'vue'

...
setup(props) {
  const counter = ref(0)

  console.log(counter) // { value: 0 }
  console.log(counter.value) // 0

  counter.value++
  console.log(counter.value) // 1
}

데이터를 여러 개 정리하려면 reactive를 사용합니다.

import { reactive } from 'vue'

...
setup(props) {
  const counters = reactive({ x: 0, y: 0 })
}

라이프 사이클 주위의 방법은?

mounted 등의 라이프 사이클 주위의 메소드는 onMounted() 등을 읽어 사용합니다.

import { onMounted } from 'vue'
...

setup (props) {
  const getUserRepositories = ...

  onMounted(getUserRepositories)
  ...
}

요약

이번에는 Vue 3.0의 Composition API에 대해 소개했습니다!
지금까지의 쓰는 방법도 일단 에러는 되지 않습니다만, 보다 읽기 쉬운 Composition API를 사용했는지 쓰는 방법에 도전하는 것도 좋을지도 모르겠네요.

트위터 이나 youtube 에서의 코멘트도 기다리고 있습니다!