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データ遅延ジャンプの問題の解決策

推薦する

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...

ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

典型的なレイアウト例上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。...

Web デザインの経験: 独善的な Web デザイナー

1. ゴミかクラシックか? Web テクノロジーは急速に更新されており、Web サイトのインターフェ...

Linux での chmod コマンドの使用方法の詳細な説明

chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...

JavaScript 上級プログラミング: 変数とスコープ

目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...

CSS3 で背景の透明化と不透明テキストを実装するサンプルコード

最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...

Sysbench の MySQL ベンチマーク プロセスの分析

序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...

Docker ベースの nginx ファイル サーバーを構築する方法と手順

1. このマシンに新しい設定ファイルdocker_nginx.confを作成します。 サーバー{ 7...

React refの使用例

目次refとは何かrefの使い方DOM要素に配置するクラスコンポーネントに配置する関数コンポーネント...

Debian 9 システムに MySQL データベースをインストールする方法

序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...

MySQLの保存場所を新しいディスクに移行する方法

1. 新しいディスクを準備し、現在のルートパーティションと同じファイルシステムでフォーマットし、ディ...

フォームにファイルをアップロードした後にアクションを保存するよう促す理由と解決策

jsonデータはhtml形式で返される必要がありますつまり、 response.setContent...

IE8は優れたエクスペリエンスを提供します: アクティビティ

今日は IE8 ベータ 1 (以下、IE8 と略します) をチラ見しました。IE8 は素晴らしい体験...

ユニアプリとミニプログラム(画像とテキスト)を下請けする方法を教えます

目次1. ミニプログラム下請け2. Uniapp 下請けアプレット下請けの手順: 1. manife...

CSS を使用して複数の方法で下揃えを実装するサンプル コード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...