Vue3とTypeScriptを組み合わせたプロジェクト開発の実践記録

概要

Vue3 がリリースされてからしばらく経ちますが、チームでは多くのビジネスプラクティスを実行し、独自の考えもいくつか持っています。

一般的に、Vue3 は、基礎となる原則とビジネスの実際の開発の両方において大きな進歩を遂げました。

以前の Object.defineProperty API の代わりに proxy を使用すると、パフォーマンスが向上し、オブジェクトと配列の処理における Vue の以前の欠陥が解決されます。diff アルゴリズムでは、静的タグメソッドが使用され、Vue の実行効率が大幅に向上します。

使用レベルでは、オプション API からコンポジション API に変更し、実際のビジネスでは、データ、メソッド、計算という元の分離された記述スタイルを徐々に放棄しました。コンポジション API はより焦点が絞られており、関連するビジネスの集約に重点を置いています。同時に、コンポジション API では、過度に重いビジネスロジックを防ぐために、懸念事項を分離する方法が提供され、コードの可読性が大幅に向上します。

TypeScript を完全にサポートしており、型検証は、将来的に Vue3 が大規模プロジェクトを開発するための品質保証となっています。同時に、フロントエンドの未来は TypeScript であるというトレンドにも直面しています。

1. コンポジションAPI

コンポジション API の本質は、セットアップ関数であるコードに反映されています。このセットアップ関数では、返されたデータがコンポーネントのテンプレートで使用されます。返されるオブジェクトは、ある程度、以前の vue2 のデータ属性を表します。

'vue' から defineComponent, ref をインポートします。
エクスポートデフォルトdefineComponent({
    名前: 'ギフト'、
    設定（） {
        定数カウンタ = ref(0);
        戻る {
            カウンタ
        }
    }
})

現時点で、ほとんどの初心者にとって、データ、計算、監視、メソッドなどのオプション API の記述方法を定義できるかどうかという疑問が生じる可能性があります。

ここで明確にしておきたいのは、Vue3 は Vue2 のオプション API の記述方法と完全に互換性があるが、理論的には、コンポーネントを記述するにはセットアップ方法の方が推奨されるということです。理由は次のとおりです。Vue3 の存在自体は、Vue2 の問題を解決するためです。Vue2 の問題は集約性が欠けていることで、コードがどんどん肥大化していきます。セットアップメソッドでは、データ、メソッドロジック、依存関係などをまとめて集約できるため、メンテナンスが容易になります。

つまり、今後はdata、computed、watch、methodsなどを別々に書かないようにするべきでしょう。Vue3がサポートしていないわけではありませんが、Vue3のコンセプトに反しています。

コンポーネントのサブコンポーネントである components プロパティは、Vue2 と 3 でほとんど違いはありません。Vue3 でも、Vue2 と同じように使用されます。

1. ref と reactive の違いは何ですか?

機能面では、ref と reactive の両方でレスポンシブなデータを実現できます。

文法レベルでは、両者の間には違いがあります。 ref で定義された responsive データは [data].value を使用して変更する必要があります。reactive で定義されたデータは [data].[propoerty] を使用して変更する必要があります。

const actTitle: Ref<string> = ref('アクティビティ名');

const actData = リアクティブ({
    リスト: [],
    合計: 0,
    現在のページ: 1,
    ページサイズ: 10
});

actTitle.value = 'アクティビティ名 2';

合計 = 100;

ただし、アプリケーションレベルではまだ違いがあります。一般的に、単一の共通データタイプの場合、応答性を定義するために ref を使用します。フォームのシナリオでは、フォームのキー:値などのオブジェクトを記述するためにリアクティブが使用されます。一部のシナリオでは、モジュールのデータセットもリアクティブに定義されます。

では、オブジェクトはリアクティブを使用して定義する必要がありますか?実は、どちらでも構いません。自分のビジネスシナリオに応じて具体的な問題を分析する必要があります。 ref はデータの値の変更を強調しますが、reactive は定義されたオブジェクトのプロパティの変更を強調します。

2. 周期関数

Vue3 では、周期関数は次のように個別に使用されます。

'vue' から defineComponent、ref、onMounted をインポートします。
エクスポートデフォルトdefineComponent({
    名前: 'ギフト'、
    設定（） {
        定数カウンタ = ref(0);
        マウント時(() => {
            // ビジネスを処理し、通常はデータ要求を行う})
        戻る {
            カウンタ
        }
    }
})

3. ストアの使用

Vue2 では、実際に this.$store を通じて直接取得できますが、Vue3 では実際には this の概念はなく、使用方法は次のとおりです。

「vuex」から useStore をインポートします。
'vue' から defineComponent、ref、computed をインポートします。
エクスポートデフォルトdefineComponent({
    名前: 'ギフト'、
    設定（） {
        定数カウンタ = ref(0);
        定数ストア = useStore();
        const storeData = computed(() => store); // computed と連携して store の値を取得します。
        戻る {
            カウンタ、
            ストアデータ
        }
    }
})

4. ルーターの使用

Vue2 では、ルーティングの機能プログラミングは this.$router を通じて行われますが、Vue3 では次のように使用されます。

「vuex」から useStore をインポートします。
「vue-router」から useRouter をインポートします。
'vue' から defineComponent、ref、computed をインポートします。
エクスポートデフォルトdefineComponent({
    名前: 'ギフト'、
    設定（） {
        定数カウンタ = ref(0);
        定数ルーター = useRouter();
        定数onClick = () => {
            router.push({ name: "ギフトを追加" });
        }
        戻る {
            カウンタ、
            クリック時
        }
    }
})

2. 関心の分離

関心の分離は 2 つの意味に分けられます。1 つ目の意味は、Vue3 のセットアップ自体が関連するデータと処理ロジックをまとめたもので、これは一種の関心の集約であり、ビジネスコードが読みやすくなるということです。

2 番目の意味は、セットアップが大きくなると、セットアップ内の関連するビジネス部分を抽出し、第 2 レベルの関心の分離を実現できることです。

「vuex」から useStore をインポートします。
「vue-router」から useRouter をインポートします。
'vue' から defineComponent、ref、computed をインポートします。
'./merchant.js' から useMerchantList をインポートします。
エクスポートデフォルトdefineComponent({
    名前: 'ギフト'、
    設定（） {
        定数カウンタ = ref(0);
        定数ルーター = useRouter();
        定数onClick = () => {
            router.push({ name: "ギフトを追加" });
        }
        // この例では、販売者リストを取得する業務を分離します。それは次の商人です。
        マーチャントリストを定数で定義します。
        戻る {
            カウンタ、
            クリック時、
            商人リスト
        }
    }
})

マーチャント.ts

「@/api/rights/gift」から { getMerchantlist } をインポートします。
「vue」から ref、onMounted をインポートします。

エクスポートデフォルト関数useMerchantList(): Record<string, any> {
  const マーチャントリスト = ref([]);
  const fetchMerchantList = 非同期() => {
    res = getMerchantlist({}) を待機します。
    マーチャントリストの値 = res?.data?.child;
  };

  マウントされたら(MerchantList を取得します);

  戻る {
    商人リスト
  };
}

3. TypeScriptのサポート

この部分の内容は、正確には TS の内容ですが、Vue3 プロジェクトの開発と密接に関係しているため、実際に Vue3 を使用する場合は、TS の使用方法を理解する必要があります。

ただし、この部分では、TS の基本的な構文を紹介するのではなく、主にビジネスシナリオで TS を構成する方法について説明します。

TS をビジネス開発に使用する場合、まずデータ構造に焦点を当て、次にデータ構造に基づいてページを開発することが基本的な考え方です。以前のフロントエンド開発モデルでは、まずページを書いてからデータに重点を置きました。

たとえば、ギフトリストページを作成する場合は、いくつかのインターフェイスを定義する必要がある場合があります。つまり、注意する必要があるのは、ページデータのインターフェイス、インターフェイスによって返されるデータ型、インターフェイスの入力パラメータの型などです。

// ギフトの作成、編集、リストの各項目はこのデータ型になります。
インターフェース IGiftItem {
  id: 文字列 | 数値;
  名前: 文字列;
  desc: 文字列;
  [キー: 文字列]: 任意;
}

// グローバルな対応する型定義 // 一般的に言えば、インターフェースによって返される型が何であるかはわかりません（null かもしれないし、オブジェクトかもしれないし、配列かもしれない）。そのため、ジェネリック型を使用してインターフェースを定義します。
インターフェースIRes<T> {
    コード: 番号;
    メッセージ: 文字列;
    データ: T
}
//インターフェース戻りデータ型定義インターフェース IGiftInfo {
    リスト: Array<IGiftItem>;
    pageNum: 番号;
    ページサイズ: 数値;
    合計: 数;
}

共通インターフェース要求では、通常、TS を使用してデータ要求、データ要求の req タイプ、およびデータ要求の res タイプを定義します。

エクスポートconst getGiftlist = (
  パラメータ: Record<文字列、任意>
): Promise<IRes<IGiftInfo>> => {
  Http.get("/apis/gift/list", params); を返します。
};

要約する

これで、Vue3とTypeScriptを組み合わせたプロジェクトの実践的な開発に関するこの記事は終了です。より関連性の高いVue3とTSを組み合わせたプロジェクト開発コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: