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

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

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

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

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

<template>
    <div>
        <h4>{{ 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 で導(dǎo)入された (プラグインを通じて Vue 2 でも利用可能) ツールのセットで、従來の Options API と比較してコンポーネント ロジックを記述するための代替方法を提供します。コンポーネントの狀態(tài)と動作を管理するための再利用可能な関數(shù)の作成に重點(diǎn)を置いています。
Comboposition API では、インポートされた API 関數(shù)を使用してコンポーネントのロジックを定義します。また、開発者は JavaScript の機(jī)能を最大限に活用してコンポーネントの動作を定義できます。
通常、Composition API は とともに使用されます。 setup 屬性は、Vue にコンパイル時の変換を?qū)g行させるためのヒントであり、これにより定型文を減らして Comboposition API を使用できるようになります。
Comboposition API の基盤は、Vue の組み込みリアクティビティ システムです。 ref や reactive などの関數(shù)は、コンポーネントが変更されたときに自動的に更新するリアクティブ データを作成します。これにより、オプション API でゲッターとセッターを手動で設(shè)定する場合と比較して、狀態(tài)管理が簡素化されます。
Composition API は、provide や inject などの関數(shù)を通じて依存関係の注入をサポートします。
Comboposition API は、以下の場合に特に有益です。

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

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

以上がVue.js の API のスタイルを理解するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。