Vue でミックスインをグローバルにミックスするにはどうすればよいですか?-Vue.js-php.cn

Vue でミックスインをグローバルにミックスするにはどうすればよいですか?

WBOY

リリース： 2023-06-10 23:36:09

オリジナル

2327 人が閲覧しました

Vue の Mixin は、コンポーネントを再利用する簡単な方法です。一般的に使用されるロジックをミックスインにカプセル化し、それらを複数のコンポーネントに注入して再利用できるため、コードの再利用率と開発効率が向上します。 Vue のバージョン 2.2.0 では、すべてのコンポーネントにミックスインを注入できるグローバルミックスイン機能が導入されましたが、この記事では、Vue でグローバルミックスインを実行する方法とそのメリットとデメリットについて説明します。

グローバルミックスインの使用

Vue でミックスインをグローバルにミックスするには、Vue.mixin 関数を使用する必要があります。この関数はパラメータとしてミックスインオブジェクトを受け取り、このミックスインオブジェクトはコンポーネントと同じさまざまなプロパティとメソッドを定義できます。

const myMixin ={
  methods: {
    // ...
  }
}
Vue.mixin(myMixin)

ログイン後にコピー

これで、myMixin オブジェクトのメソッドがすべてのコンポーネントからアクセスできることが全体的にわかりました。

それでは、コンポーネント内のミックスインと同じ名前のプロパティまたはメソッドを定義するとどうなるでしょうか? Vue のミックスインの優先順位は、下から上、左から右のルールに従います。つまり、ミックスイン内の同じ名前のプロパティやメソッド、または後で定義されたコンポーネントは、以前のプロパティやメソッドをオーバーライドします。

例:

const mixinA ={
  created() {
    console.log('mixinA created')
  },
  methods: {
    foo() {
      console.log('mixinA foo')
    }
  }
}

const mixinB ={
  created() {
    console.log('mixinB created')
  },
  methods: {
    foo() {
      console.log('mixinB foo')
    }
  }
}

const myComponent ={
  created() {
    console.log('myComponent created')
  },
  mixins: [mixinA, mixinB],
  methods: {
    foo() {
      console.log('myComponent foo')
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})

// 输出
// mixinA created
// mixinB created
// myComponent created

ログイン後にコピー

上の例では、2 つのミックスイン (mixinA および mixinB) と 1 つのコンポーネント (myComponent) を定義しました。このうち、作成したフック関数と foo メソッドは両方とも mixinA と mixinB に定義されており、myComponent にも同名の foo メソッドが定義されています。最終的に、Vue は後で定義されるミックスインまたはコンポーネント内の同じ名前のプロパティまたはメソッドの優先順位に従ってオーバーライドされます。最終的な出力結果は次のとおりです:

myComponent created

ログイン後にコピー

これは、同じ名前のプロパティまたはメソッドが存在することを意味しますミックスイン内のプロパティまたはメソッドをオーバーライドします。

グローバルミキシングの長所と短所

グローバルミキシングでは、ビジネスロジックを mixin に簡単にカプセル化し、複数のコンポーネントで再利用できますが、潜在的な問題も数多くあります。

利点

機能の分離とコードの再利用。複数のコンポーネント内の同じコードを抽出して再利用できるため、コードのスケーラビリティが大幅に向上します。
コンポーネントの複雑さを軽減します。コンポーネントから冗長コードを抽出できるため、コンポーネントの内部の複雑さが軽減され、コンポーネントの可読性と保守性が向上します。
コードを簡単に管理および保守できます。グローバルミックスインは、複数のコンポーネントを分離して、コード管理とリファクタリングを容易にすることができます。

欠点

名前の競合と上書きの問題。グローバルミックスインはすべてのコンポーネントにミックスインを挿入するため、不適切に使用すると、プロパティとメソッドの名前付けで競合やオーバーライドの問題が発生し、さらにはグローバル名前空間が汚染される可能性があります。
論理コードが散在しています。コードを再利用するためにグローバルミックスインを頻繁に使用すると、論理コードが分散して保守が困難になる可能性があります。
コンポーネント間の結合。 mixin のグローバル呼び出しによりコンポーネント間の結合が増加し、コンポーネント間の独立性が低下します。

上記の利点と欠点に基づいて、ビジネスロジックのカプセル化と再利用のための特定のビジネスシナリオに従ってグローバルミキシングを選択することも、スロット関数やレンダリング関数などの他の再利用テクノロジを使用することもできます。コードの管理と保守を改善します。

概要

グローバルミックスインは、複数のコンポーネントを再利用するために、よく使用されるロジックをミックスインにカプセル化する便利な方法です。ただし、不適切に使用すると、コード名の競合やカバレッジの問題、論理コードの散在、コンポーネント間の結合の増加などの問題が発生する可能性があります。したがって、グローバルミックスインを使用する場合は、特定のビジネスシナリオに基づいてロジックのカプセル化とコードの再利用に適切な方法を選択する必要があります。

以上がVue でミックスインをグローバルにミックスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。