Vue3 の組み合わせ機能: コンポーネントを論理的に構造化する-Vue.js-php.cn

Vue3 の組み合わせ機能: コンポーネントを論理的に構造化する

WBOY

リリース： 2023-06-18 15:25:14

オリジナル

1598 人が閲覧しました

Vue3 は、多くの便利な機能を提供する重要なフロントエンドフレームワークであり、コンポーネントもその 1 つです。 Vue コンポーネントは、フロントエンド開発で一般的に使用される抽象的な概念です。フロントエンドページを別個の再利用可能な部分に分割します。これらの部分は独立した状態と動作を持ち、さまざまなアプリケーションで再利用できます。

ただし、実際には、フロントエンドページの複雑さとさまざまなコンポーネント間の相互作用により、コンポーネントが乱雑になり、保守が困難になる可能性があります。そこで、Vue3 では、コンポーネントのロジックを効果的に構造化し、コードの可読性と保守性を向上させる、合成機能と呼ばれる新機能を提供します。以下は、Vue3 の合成機能の一部を紹介します。

組み合わせ関数とは何ですか?

Composition 関数は Vue3 で使用される新しい関数で、開発者はコンポーネントの論理関数を複数の再利用可能な関数に分割し、それらを組み合わせることができます。

Vue2 では、コンポーネントロジックは、メソッド、計算、ウォッチャーなどのオプションを通じて実装されます。ただし、このアプローチでは、関連するすべてのオプションを同じオブジェクトに配置する必要があるため、コード構造が乱雑になる可能性があります。

Vue3 は関数を組み合わせることでこれを変更します。これにより、コンポーネントロジックをよりきめ細かい方法で編成し、機能をより小さな独立した機能に分割することができます。各組み合わせ関数は、ネットワーク要求、ステータス更新、イベント処理などのロジックの特定の側面のみに焦点を当てています。合成関数を介してこれらを組み合わせて、より複雑な機能を実現できます。

組み合わせ関数の利点

組み合わせ関数を使用する主な利点は次のとおりです:

1. コードの再利用性の向上

組み合わせ関数は、コンポーネントロジックを次のように分割します。小さなブロックなので、これらの小さなブロックをさまざまな場所で再利用できます。たとえば、データを取得する関数を抽出し、コンポーネント内でその関数を複数回呼び出すことができます。コンポーネントごとにメソッドを繰り返し記述する必要はありません。

2. コードの可読性の向上

関数を組み合わせて使用すると、コード構造がより明確になり、理解しやすくなります。各関数はロジックの特定の側面のみに焦点を当てているため、コードの焦点が絞られ、保守が容易になります。

3. 独立性

結合された関数はより優れた独立性を持っています。各関数はロジックの特定の側面にのみ焦点を当てているため、各関数の機能はよりシンプルかつ明確になり、テストと保守が容易になります。

実践的なアプリケーション

具体的な例を使用して、Vue3 の組み合わせ関数の使用方法を理解しましょう。

複数の場所で使用する必要がある検索コンポーネントがあるとします。このコンポーネントには次のロジックがあります:

検索語をパラメータとして受け取ります。
APIを呼び出して該当するデータを検索します。
検索結果をインターフェースに表示します。

このコンポーネントでは、上記の 3 つのロジックを含む useSearch という名前の結合関数を作成できます。

import { ref } from 'vue'

export default function useSearch(keyword) {
  const searchResult = ref([])

  // 调用搜索API，并更新搜索结果
  async function search() {
    const res = await fetch(`https://api/?q=${keyword}`)
    searchResult.value = await res.json()
  }

  search() // 初始化调用一次

  return {
    searchResult,
    search
  }
}

ログイン後にコピー

in コンポーネント

<template>
  <div>
    <input type="text" v-model="keyword" @keyup.enter="doSearch" />
    <ul>
      <li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import useSearch from './useSearch'

export default {
  setup() {
    const { search, searchResult } = useSearch('default')

    const keyword = ref('')

    function doSearch() {
      search(keyword.value)
    }

    return {
      searchResult,
      keyword,
      doSearch
    }
  }
}
</script>

ログイン後にコピー

By コンポーネントロジックは次のとおりです。 useSearch を作成するために個別の関数に分割され、検索機能が必要な場所で再利用できます。コンポーネントでは、useSearch を参照し、コンポーネントに関連付けられた検索状態と、search() 関数を呼び出して検索状態を更新する doSearch 関数を作成します。