Vue.js のミックスインの詳細な説明

ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オブジェクトには任意のコンポーネントオプションを含めることができます。コンポーネントがミックスインを使用する場合、ミックスイン内のすべてのオプションがコンポーネント自体のオプションに「ミックス」されます。

1. Mixinの基本的な使い方

これで、クリックすると数字が増加するプログラムができました。これが完成したら、データが変更されるたびに、コンソールに「データが変更されました」というプロンプトが表示されるようになることを期待します。

コード実装プロセス:

<div id="アプリ">
    <p>数値:{{数値}}</p>
    <P><button @click="add">数量を追加</button></P>
</div>


<スクリプト>
    var ログを追加 = {
    	// 更新フックをvueインスタンスにミックスする updated() {
            console.log("データが " + this.num + " に変更されます。");
        }
    }

    var アプリ = 新しい Vue({
        el: '#app',
        データ： {
            番号: 1
        },
        メソッド: {
            追加: 関数 () {
                this.num++;
            }
        },
        ミックスイン: [addLog], //mixin})
</スクリプト>

ここに写真の説明を記入してください

ボタンをクリックすると、混合 addLog 内の更新されたメソッドがトリガーされます。

2. ミックスインの呼び出し順序

実行順序としては、混入的先執行，然后構造器里的再執行
data内の属性とmethods内のメソッドは上書きされます（構造器覆蓋混入的屬性和方法）
ライフサイクルフックは2回呼び出され、上書きされません（先調用混入鉤子再調用構造器鉤子）。

上記のコードのコンストラクターに更新されたフック関数も追加しました。

<div id="アプリ">
    <p>数値:{{数値}}</p>
    <P><button @click="add">数量を追加</button></P>
</div>


<スクリプト>
    var ログを追加 = {
        更新: 関数() {
            console.log("データが " + this.num + " に変更されます。");
        }
    }

    var アプリ = 新しい Vue({
        el: '#app',
        データ： {
            番号: 1
        },
        メソッド: {
            追加: 関数 () {
                this.num++;
            }
        },
        更新: 関数 () {
            console.log("コンストラクター内のメソッドが更新されました。")
        },
        ミックスイン: [addLog], //mixin})
</スクリプト>

ここに写真の説明を記入してください

3. グローバルミックスイン方式

グローバルミックスインは、ミックスインおよびコンストラクターメソッドの前に実行されます。

<div id="アプリ">
    <p>数値:{{数値}}</p>
    <P><button @click="add">数量を追加</button></P>
</div>


<スクリプト>
    Vue.mixin({
        更新: 関数 () {
            console.log('私はグローバルに混在しています');
        }
    })

    var ログを追加 = {
        更新: 関数() {
            console.log("データが " + this.num + " に変更されます。");
        }
    }

    var アプリ = 新しい Vue({
        el: '#app',
        データ： {
            番号: 1
        },
        メソッド: {
            追加: 関数 () {
                this.num++;
            }
        },
        更新: 関数 () {
            console.log("コンストラクター内のメソッドが更新されました。")
        },
        ミックスイン: [addLog], //mixin})
</スクリプト>

ここに写真の説明を記入してください

順次要約:全局混入> 局部混入> 構造器

2つのオブジェクトキー名が競合する場合は、コンポーネントオブジェクトのキーと値のペアを取得します。

ミックスインとコンポーネントオブジェクトの両方にテストメソッド (同じ名前) がある場合、最終的な値はコンポーネントオブジェクトのキーと値のペアになります。

  <div id="アプリ">
      <p>数値:{{数値}}</p>
      <P>
          <button @click="add">数量を追加</button>
      </P>
  </div>

  <スクリプト>
      var ログを追加 = {
          更新: 関数 () {
              console.log("データが " + this.num + " に変更されます。");
              これをテストします。
          },
          メソッド: {
              テスト: 関数 () {
                  console.log('ミックスインでのテスト')
              }
          }
      }

      var アプリ = 新しい Vue({
          el: '#app',
          データ： {
              番号: 1
          },
          メソッド: {
              追加: 関数 () {
                  this.num++;
              },
              テスト:関数(){
                  console.log('コンポーネントオブジェクト内のテスト')
              }
          },
          ミックスイン: [addLog], //mixin})
</スクリプト>

ここに写真の説明を記入してください