Vue3アドバンストテーマComposition APIの使い方

Composition API とは

Composition API は、コードの可読性、保守性、再利用性を向上させることを目的として、Vue3 で導入された新しい API スタイルです。構成 API は、Vue2 のオプション API とは異なり、関数ベースのプログラミング手法を採用し、コンポーネント内のロジックをより小さな構成可能な関数単位に分解し、より柔軟で効率的なコード構成を実現します。

Vue3 がコンポジション API の使用を推奨する理由

Vue3 がコンポジション 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 を通じて上記の機能を実現できますが、可読性と保守性はそれほど高くありません。構成 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'
    }
  }
}

mixin を使用すると、パブリック ロジックをコンポーネントに混合できることがわかりますが、いくつかの問題があります。 名前の競合、ライフサイクルフックの呼び出し順序、その他の問題など、混合に関する問題。

以上がVue3アドバンストテーマComposition APIの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。