Vue ミックスインはライフサイクルを使用できますか?

Vue のミックスインはライフサイクルを使用できます。 mixin のライフ サイクルは、mixin を導入するコンポーネントのライフ サイクルと一緒に呼び出され、mixin のライフ サイクル関数は、mixin を導入するコンポーネントよりも速く呼び出されます。複数のミックスインのライフサイクルはマージされて一緒に実行されますが、同じ名前のプロパティとメソッドはマージできないため、競合や上書きが発生する可能性があることに注意してください。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

ミックスインの基本入門

開発プロセス中に、同じロジックと機能を持ついくつかのコンポーネントに遭遇します。すべてのコンポーネントに追加するわけではありません。1 つ作成してください。コードのセット。これによりコードの冗長性が生じます。

ミックスインの機能は、同じロジックや機能を抽出して単一のファイルに分割することであり、コンポーネントはミックスインを導入するだけで同じ機能を実現できます。

mixins

を使用すると、src フォルダーに mixins フォルダーが作成され、その中に対応する mixin.js ファイルが書き込まれます。以下に示すように:

以下に示すように、js ファイルを使用して vue のスクリプト部分を抽出します:

  data(){
    return {}
  },
  methods:{},
  computed:{},
  filters:{},  created(){},  mounted(){
    console.log("我是mixins");
  }
}复制代码

コンポーネント ミックスインに導入できます。

ミックスインの特性

1. ミックスインのライフ サイクルは

と同じになります。 mixin を導入するコンポーネントのライフサイクルは に統合され、一緒に と呼ばれます。また、mixin のライフサイクル関数は、mixins を導入するコンポーネントの よりも 高速になります。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

2. コンポーネントのデータ、メソッド、フィルターは、ミックスイン内の同じ名前のデータ、メソッド、フィルターを上書きします。

3. 異なるミックスイン内の同じ名前のメソッドは、次の順序で上書きする必要があります。はじめに. 同じ名前の以前のメソッド。

mixin の欠点

1. 変数のソースが不明瞭 (暗黙的に渡される) ため、読みにくくなり、コードが難しくなります。維持すること。

複数のミックスインをコンポーネントに導入し、ミックスイン内の変数/メソッドを直接かつ暗黙的に呼び出すことができます。これにより、場合によっては混乱が生じ、これらの変数やメソッドを区別できなくなります。どのミックスインに属しているのかに？

2. 複数のミックスインのライフサイクルはマージされて一緒に実行されますが、同じ名前のプロパティとメソッドはマージできないため、競合や上書きが発生する可能性があります。

たとえば、コンポーネント 1 のメソッドは属性情報を出力する必要があります。

しかし、コンポーネント 2 にも同じ名前の属性情報があり、コンポーネント 1 の属性情報が上書きされます
次に、メソッドのコンポーネント 1 を実行すると、出力は確かにコンポーネント 2 の属性になります。
これは回避できますが、注意しないと競合が発生し、混乱が生じやすくなります。

3. ミックスインとコンポーネントの間には多対多の関係があり、複雑さが高くなります。

つまり、1 つのコンポーネントが複数のミックスインを参照できます。 1 つのミックスインを複数のミックスインから参照することもできます。コンポーネント参照。

(学習ビデオ共有:

vuejs 入門チュートリアル 、基本プログラミング ビデオ )

以上がVue ミックスインはライフサイクルを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。