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

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 TypeScript開発に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 コンパイルプロセス - ソースコード分析
  • Vue3における7種類のコンポーネント通信の詳細
  • Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明
  • Vue2とVue3の兄弟コンポーネント通信バスの違いと使い方
  • vue3 を使用してカウント関数コンポーネントのカプセル化例を実装する
  • Vue3.0はドロップダウンメニューのカプセル化を実装します
  • Vue3.0はチェックボックスコンポーネントのカプセル化を実装します
  • vue3とvue2の利点の比較
  • Vue3とTypeScriptを組み合わせたプロジェクト開発の実践記録
  • Vue3 AST パーサー - ソースコード分析

<<:  Nginx の動的および静的分離実装ケースのコード分析

>>:  MySQLデータ遅延ジャンプの問題の解決策

推薦する

Vue の動的メニュー、動的ルートの読み込みと更新の落とし穴

目次必要:アイデア:レッスン:テキストを共有する:要約する必要:インターフェイスからサブメニュー デ...

CSS を使用して同じ親タグの左側と右側に 2 つのボタンを配置する方法

この記事では、主に同じ親タグの左側と右側にある 2 つのボタンの CSS レイアウト方法を紹介し、皆...

MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...

Linux環境でグラフデータベースneo4jを構築する方法の説明

Neo4j (Nosql の 1 つ) は、高性能なグラフ データベース (分散をサポートしていませ...

HTML5 と HTML4 の 10 の主な違い

HTML5 は HTML 標準の次のバージョンです。ますます多くのプログラマーが、Web サイトの構...

Linux での一般的なシェル スクリプト コマンドと関連知識

目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...

CSSでカスタムフォント(font-face)を導入する方法の詳細な説明

なぜこれを使ったのか?それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。さて、無...

JavaScript は自由に移動するウィンドウのマウス制御を実装します

この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考...

MySQL 5.7 でパスワードを忘れた場合の解決方法の詳細な説明

環境: [root@centos7 ~]# uname -r 3.10.0-514.el7.x86_...

vuexプロジェクトにおけるログインステータス管理の実践プロセス

目次道具:ログインシナリオ:練習する:シナリオ1: 思考と実践シナリオ2: 思考と実践要約する道具:...

ドロップダウンリスト選択ボックスを実装するJavaScript

この記事の例では、ドロップダウンリスト選択ボックスを実装するためのJavaScriptの具体的なコー...

Windows 10 1903 エラー 0xc0000135 の解決方法 [推奨]

Windows 10 1903 は、2019 年に Microsoft がリリースした Windo...

Tomcat のプレースホルダーによるポート設定方法 (パラメータ指定方式)

仕事で必要になったため、インターネットで多くの情報を見つけましたが、それらはすべてコピーアンドペース...

使用状況分析を備えたMySQL

持つことの使用法having 句を使用すると、グループ化後にさまざまなデータをフィルター処理できます...

MySQL のデータの偶発的な削除の解決策と kill ステートメントの原則

mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...