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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

紛爭の命名

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

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

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

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

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

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

暗黙の依存関係

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

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

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

Mixinから移動します

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

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

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

構(gòu)成APIクラッシュコース

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

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

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

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

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

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

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

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

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

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

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

コード抽出

構(gòu)成APIの最初の明らかな利點は、ロジックの抽出の容易さです。

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

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

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

コードの再利用

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

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

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

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

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

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

この問題は、構(gòu)成関數(shù)から返された狀態(tài)または方法を明示的に名前にする必要があるため、構(gòu)成APIには存在しません。

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

命名競合は、他のJavaScript変數(shù)と同じ方法で解決されます。

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

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

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

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

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

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

要約します

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

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

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

以上がVue構(gòu)成APIがVueミックスインをどのように置き換えるかの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。