Vue.js ミックスイン

ミックスイン (mixins) は、再利用可能なメソッドや算出プロパティの一部を定義します。ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。コンポーネントがミックスインオブジェクトを使用するとき、ミックスインオブジェクトのすべてのオプションはコンポーネント自体のオプションにミックスインされます。

簡単な例を見てみましょう：

オプションのマージ

コンポーネントとミックスインオブジェクトに同じ名前のオプションがある場合、これらのオプションは適切な方法でマージされます。

例えば、データオブジェクトは内部で浅いマージ（1層のプロパティ深度）が行われ、コンポーネントのデータと衝突する場合はコンポーネントのデータが優先されます。

以下の例では、Vue インスタンスとミックスインオブジェクトに同じメソッドが含まれています。出力結果から、2つのオプションがマージされていることがわかります。

ミックスイン呼び出し

methods オプションに同じ関数名がある場合、Vue インスタンスの優先度が高くなります。次の例では、Vue インスタンスとミックスインオブジェクトの methods オプションの両方に同じ関数が含まれています：

HelloWorld 方法
start 方法
Main：相同方法名

上記の例では、以下の3つのメソッドを呼び出しました：

vm.hellworld();
vm.start();
vm.samemethod();

出力結果から、methods オプションに同じ関数名がある場合、Vue インスタンスが優先されて実行され、出力されることがわかります。

グローバルミックスイン

ミックスインオブジェクトをグローバルに登録することもできます。注意して使用してください！ グローバルミックスインオブジェクトを使用すると、その後に作成されるすべての Vue インスタンスに影響を与えます。適切に使用すると、カスタムオブジェクトに処理ロジックを注入できます。

グローバルミックスインオブジェクトは、個別に作成されたすべての Vue インスタンス（サードパーティのテンプレートを含む）に影響するため、慎重に使用してください。