Vue構成APIがVueミックスインをどのように置き換えるか

Vueコンポーネント間でコードを共有しますか？ Vue 2に精通している場合は、 Mixinを使用してこれを達成した可能性があります。しかし、新しい構成API （現在はVUE 2のプラグインとして利用可能であり、VUE 3の今後の機能です）は、より良いソリューションを提供します。

この記事では、Mixinの欠点を調査し、構成APIがこれらの欠点を克服し、VUEアプリケーションをよりスケーラブルにする方法を理解します。

ミックスインの簡単な説明

次のセクションでカバーするものにとって重要であるため、Mixinモードをすばやく確認しましょう。

通常、VUEコンポーネントは、データ、メソッド、計算プロパティなど、実装する必要がある機能を表すさまざまなプロパティを持つJavaScriptオブジェクトによって定義されます。

 // mycomponent.js
デフォルトのエクスポート{
  データ：（）=>（{
    mydataproperty：null
  }）、
  方法：{
    mymethod（）{...}
  }
  // ...
}

コンポーネント間で同じプロパティを共有したい場合は、共通のプロパティを別のモジュールに抽出できます。

 // mymixin.js
デフォルトのエクスポート{
  データ：（）=>（{
    myshareddataproperty：null
  }）、
  方法：{
    mysharedmethod（）{...}
  }
}

これで、このミックスインをMixin構成プロパティに割り当てることで使用する任意のコンポーネントに追加できます。実行時に、Vueはコンポーネントの特性を任意のミックスインと統合します。

 //消費component.js
"./mymixin.js"からmymixinをインポートします。

デフォルトのエクスポート{
  ミックスイン：[mymixin]、
  データ：（）=>（{
    mylocaldataproperty：null
  }）、
  方法：{
    mylocalmethod（）{...}
  }
}

この特定の例では、ランタイムで使用されるコンポーネント定義は次のとおりです。

デフォルトのエクスポート{
  データ：（）=>（{
    myshareddataproperty：null、
    mylocaldataproperty：null
  }）、
  方法：{
    mysharedmethod（）{...}、
    mylocalmethod（）{...}
  }
}

ミックスインは「有害」と見なされます

早くも2016年半ばに、ダン・アブラモフは「ミキシンは有害と考えられている」と書いた。そこでは、反応成分にミキシンを使用して論理を再利用することが反パターンであると考えており、それらを避けることを提唱した。

残念ながら、彼がReact Mixinについて言及した欠点もVueにも当てはまります。構成APIがこれらの欠点をどのように克服するかを理解する前に、これらの欠点を見てみましょう。

紛争の命名

Mixin Modeが実行時に2つのオブジェクトをどのようにマージするかを確認します。彼らがすべて同じ名前でプロパティを共有するとどうなりますか？

 const mixin = {
  データ：（）=>（{
    myProp：null
  }）
}

デフォルトのエクスポート{
  ミックスイン：[ミックスイン]、
  データ：（）=>（{
    //同じ名前！
    myProp：null
  }）
}

これは、合併戦略が登場する場所です。これは、コンポーネントに同じ名前の複数のオプションが含まれている場合に何が起こるかを決定するための一連のルールです。

VUEコンポーネントのデフォルト（ただし構成可能な）マージポリシーは、ローカルオプションがミックスインオプションをオーバーライドすることを規定しています。しかし、例外があります。たとえば、同じタイプの複数のライフサイクルフックがある場合、これらのフックはフックアレイに追加され、すべてのフックが順次呼ばれます。

実際のエラーが発生しなくても、複数のコンポーネントとミキシン間の名前のプロパティを扱う場合、コードを作成するのがますます困難になる可能性があります。これは、NPMパッケージとしてのサードパーティのミックスインと、競合を引き起こす可能性のある名前のプロパティが特に困難です。

暗黙の依存関係

Mixinとそれを使用するコンポーネントの間には階層的な関係はありません。これは、コンポーネントがミックスインで定義されたデータプロパティを使用できることを意味します（例：mysharedDataproperty）が、ミックスインはコンポーネントで定義されたデータプロパティ（mylocaldatapropertyなど）を想定して使用することもできます。これは、Mixinを使用して入力検証を共有する場合に一般的です。 Mixinは、コンポーネントが独自の検証メソッドで使用する入力値を持つことを期待する場合があります。

しかし、これは問題を引き起こす可能性があります。後でコンポーネントをリファクタリングし、混合物が必要とする変数の名前を変更するとどうなりますか？コンポーネントからの問題に気付くことはありません。コード検査官もそれを見つけません。実行時にのみエラーが表示されます。

多くのミックスインを含むコンポーネントを想像してください。ローカルのデータプロパティをリファクタリングできますか、それともミックスを壊しますか？どのミックスがありますか？すべてのミキシンを手動で検索して知る必要があります。

Mixinから移動します

Danの記事は、高度なコンポーネント、ユーティリティ方法、その他のコンポーネントの組み合わせパターンなど、Mixinの代替品を提供します。

Vueは多くの方法で反応することに似ていますが、彼が提案する代替パターンはVueにうまく変換されません。したがって、この投稿は2016年半ばに書かれましたが、Vue開発者はそれ以来、Mixinの問題に耐えてきました。

今まで。 Mixinの欠点は、組成APIの背後にある主な動機付け要因の1つです。ミックスインの問題をどのように克服するかを理解する前に、それがどのように機能するかを簡単に見てみましょう。

構成APIクラッシュコース

構成APIの重要なアイデアは、コンポーネント（状態、メソッド、計算プロパティなど）の関数をオブジェクトプロパティとして定義する代わりに、新しいセットアップ関数から返されるJavaScript変数として定義されることです。

以下は、「カウンター」関数を定義する構成APIを使用して定義されたVUE 2コンポーネントの典型的な例です。

 //counter.vue
デフォルトのエクスポート{
  データ：（）=>（{
    カウント：0
  }）、
  方法：{
    increment（）{
      this.count;
    }
  }、
  計算：{
    double（）{
      this.count * 2を返します。
    }
  }
}

構成APIを使用して定義されたまったく同じコンポーネントを以下に示します。

 // counter.vue
「Vue」から{ref、calculated}をインポートします。

デフォルトのエクスポート{
  設定（） {
    const count = ref（0）;
    const double = computed（（）=> count.value * 2）
    function increment（）{
      count.value;
    }
    戻る {
      カウント、
      ダブル、
      インクリメント
    }
  }
}

まず、REF関数をインポートしたことに気付きます。これにより、データ変数とほぼ同じ関数を持つレスポンシブ変数を定義できます。コンピューター機能にも同じことが言えます。

増分方式は応答性がないため、通常のJavaScript関数として宣言できます。カウントレスポンシブ変数の値を変更するには、サブプロパティ値を変更する必要があることに注意してください。これは、refで作成された応答性変数が、渡されたときに応答性を維持するためにオブジェクトである必要があるためです。

refの仕組みを詳細に理解するために、Vue Composition APIドキュメントを参照することをお勧めします。

これらの関数を定義した後、セットアップ関数からそれらを返します。上記の2つのコンポーネントの関数に違いはありません。私たちがしたのは、代替APIを使用することだけでした。

ヒント：構成APIはVUE 3のコア機能になりますが、VUE 2のNPM Plugin @vue/Composition-APIを使用することもできます。

コード抽出

構成APIの最初の明らかな利点は、ロジックの抽出の容易さです。

構成APIを使用して、上記のコンポーネントをリファクタリングして、定義する機能がJavaScriptモジュールUSECounterにあるようにしましょう。 （関数の説明として「使用」を使用するプレフィックスは、構成APIの命名規則です。）

 // usecounter.js
「Vue」から{ref、calculated}をインポートします。

デフォルトfunction（）をエクスポートする{
  const count = ref（0）;
  const double = computed（（）=> count.value * 2）
  function increment（）{
    count.value;
  }
  戻る {
    カウント、
    ダブル、
    インクリメント
  }
}

コードの再利用

この関数をコンポーネントで使用するには、モジュールをコンポーネントファイルにインポートして呼び出すだけです（インポートは関数であることに注意してください）。これにより、定義する変数が返され、セットアップ関数から返すことができます。

 // mycomponent.js
"./usecounter.js"からUsecounterをインポートします。

デフォルトのエクスポート{
  設定（） {
    const {count、double、increment} = usecounter（）;
    戻る {
      カウント、
      ダブル、
      インクリメント
    }
  }
}

最初は、これは少し長くて意味のないように見えますが、このパターンが以前に見た混合問題をどのように克服しているかを見てみましょう。

紛争の命名...解決されました！

以前に、Mixinが使用コンポーネントの名前と同じ名前のプロパティを使用したり、使用コンポーネントで使用されている他のミックスのプロパティとは隠されたりすることができることがわかりました。

この問題は、構成関数から返された状態または方法を明示的に名前にする必要があるため、構成APIには存在しません。

デフォルトのエクスポート{
  設定 （） {
    const {somevar1、somemethod1} = usecompfunction1（）;
    const {somevar2、somemethod2} = usecompfunction2（）;
    戻る {
      Somevar1、
      somemethod1、
      Somevar2、
      somemethod2
    }
  }
}

命名競合は、他のJavaScript変数と同じ方法で解決されます。

暗黙の依存関係...解決済み！

また、Mixinがコンポーネントで定義されたデータプロパティを使用できることも見てきました。これにより、コードを脆弱で理解しにくくします。

併用関数は、コンポーネントで定義されたローカル変数を呼び出すこともできます。ただし、違いは、この変数を複合関数に明示的に渡す必要があることです。

 "./USECOMPFUNCTION"からUseCompFunctionをインポートします。

デフォルトのエクスポート{
  設定 （） {
    //コンビネーション関数に使用する必要があるローカル値const mylocalval = ref（0）;

    //パラメーターconst {...} = usecompfunction（mylocalval）として明示的に渡す必要があります。
  }
}

要約します

混合モードは、表面上で非常に安全に見えます。ただし、コードの脆弱性と関数を理解する能力を覆い隠す方法が増加するため、オブジェクトをマージしてコードを共有することはアンチパターンになります。

Composition APIの最も賢いことは、VUEがネイティブJavaScriptに組み込まれたセキュリティ対策に依存して、変数を関数やモジュールシステムに渡すなどのコードを共有できることです。

これは、構成APIがあらゆる点でVueの古典的なAPIよりも優れていることを意味しますか？いいえ。ほとんどの場合、古典的なAPIに固執することができます。ただし、コードを再利用する予定がある場合、構成APIは間違いなくより良い選択です。

以上がVue構成APIがVueミックスインをどのように置き換えるかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。