Vue.js の API のスタイルを理解する

Vue は、ユーザー インターフェイスを構築するための JavaScript フレームワークです。標準の HTML、CSS、JavaScript を基盤として構築され、あらゆる複雑なユーザー インターフェイスを効率的に開発できる宣言型のコンポーネントベースのプログラミング モデルを提供します。
Vue コンポーネントは、オプション API とコンポジション API (バージョン 2.6 以降で導入) の 2 つの API スタイルで作成できます。どちらのアプローチにも独自の利点と欠点があり、プロジェクトに適切な方法を選択するのは難しい決断となる場合があります。

両方の理解スタイルについて詳しく見てみましょう

オプション API:
Options API は、Vue コンポーネントを構築する従来の方法です。データ、メソッド、計算されたプロパティなどのオプションのセットを使用して、コンポーネントの動作と状態を定義します。
data(): この関数は、コンポーネントのリアクティブ データ プロパティを含むオブジェクトを返します。これらのプロパティは、値が変更されるとコンポーネントのレンダリング出力を更新します。
Methods(): この関数は、コンポーネントのテンプレートまたは他のメソッド内で使用できるメソッド (関数) を含むオブジェクトを返します。これらのメソッドはデータを操作したり、アクションを実行したりできます。
計算されたプロパティ: これらの関数は、コンポーネントのデータに基づいて値を返します。これらは、依存関係 (リアクティブ データ プロパティ) が変更されるたびに再計算されます。
オプション API の主な利点の 1 つは、シンプルで理解しやすいことです。これは、多くの開発者に馴染みのある明確な宣言パターンに従っており、Vue のドキュメントに詳しく説明されています。これは、Vue を始めたばかりの初心者にとっては良い選択肢になります。

ただし、オプション API にはいくつかの制限があり、より複雑なプロジェクトでの使用が困難になる可能性があります。
オプション API のもう 1 つの制限は、コンポーネント間でロジックを共有する場合に柔軟性がなくなる可能性があることです。
オプション API を使用して構築されたコンポーネントの単体テストは、より困難になる可能性があります。ロジックがさまざまなオプションに分散しているため、テストのために特定の機能を分離することが困難になります。

オプション API のスタイルの例を見てみましょう:

<template>
    <div>
        <h4 id="name-s-To-Do-List">{{ name }}'s To Do List</h4>
        <div>
            <input v-model="newItemText" v-on:keyup.enter="addNewTodo">
            <button v-on:click="addNewTodo">Add</button>
            <button v-on:click="removeTodo">Remove</button>
        </div>
        <ul>
            <li v-for="task in tasks" v-bind:key="task">{{ task }}</li>
        </ul>
    </div>
</template>
<script>
    export default { 
    data() { 
           return 
               {  name: "John", 
                  tasks: ["Buy groceries", "Clean the house"], 
                  newItemText: "", 
                };
            }, 
   methods: { 
          addNewTodo() 
            { 
               if (this.newItemText !== "") 
                {  this.tasks.push(this.newItemText); 
                   this.newItemText = ""; 
                } 
            }, 
         removeTodo(index) { this.tasks.splice(index, 1); }, }, };
</script>

1. 合成 API :

Composition API は、Vue 3 で導入された (プラグインを通じて Vue 2 でも利用可能) ツールのセットで、従来の Options API と比較してコンポーネント ロジックを記述するための代替方法を提供します。コンポーネントの状態と動作を管理するための再利用可能な関数の作成に重点を置いています。
Comboposition API では、インポートされた API 関数を使用してコンポーネントのロジックを定義します。また、開発者は JavaScript の機能を最大限に活用してコンポーネントの動作を定義できます。
通常、Composition API は とともに使用されます。 setup 属性は、Vue にコンパイル時の変換を実行させるためのヒントであり、これにより定型文を減らして Comboposition API を使用できるようになります。
Comboposition API の基盤は、Vue の組み込みリアクティビティ システムです。 ref や reactive などの関数は、コンポーネントが変更されたときに自動的に更新するリアクティブ データを作成します。これにより、オプション API でゲッターとセッターを手動で設定する場合と比較して、状態管理が簡素化されます。
Composition API は、provide や inject などの関数を通じて依存関係の注入をサポートします。
Comboposition API は、以下の場合に特に有益です。

複雑で再利用可能なコンポーネントの構築
コードの編成と保守性を優先するプロジェクト
タイプ セーフティのために TypeScript を利用するアプリケーション
Comboposition API は、使用するのに最適なオプションのように思えるかもしれません。ただし、Composition API には欠点がないわけではありません。問題の 1 つは、関数型リアクティブ プログラミングに慣れていない開発者にとって、学習がより困難になる可能性があることです。
もう 1 つの問題は、Composition API がデフォルトで Vue 2.6 以前と下位互換性がないことです。これは、Vue 3.0 にアップグレードするか、プラグイン経由で作曲 API をインポートする必要があることを意味します。

Composition API スタイルの例を見てみましょう:

以上がVue.js の API のスタイルを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。