Vue3 고급 테마 Composition API를 사용하는 방법

Composition API란 무엇입니까

Composition API는 코드의 가독성, 유지 관리성 및 재사용성을 향상시키는 것을 목표로 Vue3에 도입된 새로운 API 스타일입니다. Composition API는 Vue2의 옵션 API와 다릅니다. 이는 구성 요소 내의 논리를 더 작은 구성 가능한 기능 단위로 분해하여 보다 유연하고 효율적인 코드 구성을 달성하는 기능 기반 프로그래밍 방법을 채택합니다.

Vue3에서 Composition API 사용을 권장하는 이유

Vue3에서 Composition API 사용을 권장하는 주된 이유는 구성 요소 로직을 더 효과적으로 구성하고 재사용하기 위한 것입니다.

Vue2에서는 일반적으로 다양한 옵션(예: 데이터, 메서드, 계산 등)을 정의하여 구성 요소의 동작을 정의하는 옵션 API를 사용합니다. 이 접근 방식에는 다음과 같은 몇 가지 단점이 있습니다.

• 관련 코드가 다양한 옵션에 분산되어 있으므로 대형 구성 요소를 유지 관리하기가 어려워집니다.

• 대형 구성 요소는 코드를 재사용하기 어렵기 때문에 중복된 로직을 가질 수 있습니다.

• 어떤 데이터 속성이 수정되었는지, 언제 수정되었는지 추적하는 것이 어려울 수 있습니다.

아래의 간단한 예를 들어보겠습니다. 다음 코드는 데이터를 얻기 위한 로직을 정의합니다.

import { reactive, onMounted } from 'vue'
import axios from 'axios'
export function useData(url) {
  const data = reactive({
    loading: false,
    error: null,
    items: []
  })
  const fetchData = async () => {
    data.loading = true
    try {
      const response = await axios.get(url)
      data.items = response.data
    } catch (error) {
      data.error = error.message
    }
    data.loading = false
  }
  onMounted(() => {
    fetchData()
  })
  return {
    data,
    fetchData
  }
}

이 로직은 데이터 획득 방법, 로딩 상태 처리, 오류 메시지 등의 로직을 다룹니다. 코드 중복을 피하기 위해 여러 구성 요소에서 이 논리를 사용할 수 있습니다.

예를 들어, 컴포넌트에서 다음 로직을 사용하세요:

import { useData } from './useData'
export default {
  setup() {
    const { data } = useData('https://api.example.com/data')
    return {
      data
    }
  }
}

물론 Vue2는 mixin을 통해 위 기능을 달성할 수도 있지만 가독성과 유지 관리성은 Composition API만큼 좋지 않습니다:mixin也能实现上面的功能, 但可读性和可维护性不如Composition API:

const dataMixin = {
  data() {
    return {
      loading: false,
      error: null,
      items: []
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      axios.get(this.url)
        .then(response => {
          this.items = response.data
        })
        .catch(error => {
          this.error = error.message
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  mounted() {
    this.fetchData()
  }
}

然后在组件中使用:

export default {
  mixins: [dataMixin],
  data() {
    return {
      url: 'https://api.example.com/data'
    }
  }
}

可以看到，使用mixinrrreee 그런 다음 컴포넌트에서 사용하는 경우: rrreee

mixin을 사용하면 공용 로직을 컴포넌트에 혼합할 수 있지만 혼합에는 🎜이름 충돌🎜, 호출 순서와 같은 몇 가지 문제가 있음을 알 수 있습니다. 사이클 후크 등 질문입니다. 🎜

위 내용은 Vue3 고급 테마 Composition API를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!