Vue3 の命令関数: カスタム命令によりコードがより柔軟になります

Vue は非常に人気のあるフロントエンドフレームワークですが、近年 Vue を利用する過程では、v-if や v-show などの DOM 要素の表示・非表示機能を操作する命令がよく使われます。しかし、Vue3 のリリースに伴い、ディレクティブ機能 (Directive Function) が大幅に変更・改良され、Vue3-custom ディレクティブに非常に便利なディレクティブが追加されました。この記事では、Vue3の命令機能、特にカスタム命令の使い方やメリットについて詳しく紹介します。

1. ディレクティブ関数の基本概念

Vue では、ディレクティブはテンプレートで使用される特別なプレフィックス属性です。命令の値は単一の JavaScript 式であることが期待されます (後で説明する v-for を除く)。命令の機能は、式の値が変化したときにそれに応じて関連する効果を DOM に適用することです。たとえば、テンプレートで v-if ディレクティブを使用すると、式の値に基づいて要素を表示するかどうかを制御できます。

Vue3 の命令関数は 4 つのパラメータを受け取ることができる関数で、命令がバインドされている要素や DOM 要素上のさまざまな属性やイベントにアクセスでき、Vue との対話も可能です。データ対話を実行します。命令関数の 4 つのパラメータは次のとおりです。

• el: 命令がバインドされている要素は、el を使用して要素の属性、スタイルなどを取得または変更できます。

• binding: 次のプロパティを含むオブジェクト:

  • name: v- プレフィックスを除いたディレクティブの名前。
  • value: ディレクティブのバインディング値。たとえば、v-my-directive="1 1" の場合、バインディング値は 2 です。
  • oldValue: 命令バインディングの以前の値。update フックとcomponentUpdated フックでのみ使用できます。
  • expression: 文字列形式の命令式。たとえば、v-my-directive="1 1" の場合、expression の値は "1 1" になります。
• vnode: Vue のコンパイルによって生成された仮想ノード。
• prevVNode: 前の仮想ノード。update フックとcomponentUpdated フックでのみ使用できます。

命令関数は、バインディング オブジェクトの属性を通じて命令関連情報にアクセスし、el オブジェクトを通じて DOM 要素を操作します。

Vue3 の命令関数は DOM 要素との対話のみを担当することに注意してください。データ処理またはビジネス ロジック処理が必要な場合は、それを実現するために命令関数内で他の関数またはメソッドを呼び出す必要があります。 。

2. カスタム命令の使用方法

Vue3 では、命令をカスタマイズするための非常に便利な方法が提供されています。必要なのは、Vue.directive 関数を呼び出し、命令名と命令関数を渡すことだけです。コマンドをカスタマイズできます。簡単な例を次に示します。

<template>
  <div v-my-directive>Custom Directive</div>
</template>

<script>
  import { directive } from 'vue';

  const myDirective = {
    mounted(el, binding) {
      console.log('custom directive mounted', binding);
    }
  }

  export default {
    directives: {
      'my-directive': myDirective,
    },
  };
</script>

上の例では、Vue.directive 関数を呼び出し、ディレクティブ名 'my-directive' とディレクティブ関数 myDirective を渡しました。次に、コンポーネントの directives オプションにディレクティブを登録すると、テンプレートで v-my-directive カスタム ディレクティブを使用できるようになります。

myDirective 関数にマウントされたフック関数は、バインドされた DOM 要素が親要素に挿入されるときに呼び出されます。この関数では、el パラメータを通じて現在バインドされている DOM 要素を取得し、バインディング パラメータを通じて命令のバインド値やその他の情報を取得し、対応する操作を実行できます。

3. カスタム命令のメリット

カスタム命令のメリットは、v-ifやv-showなどの組み込み命令と比較して、用途に応じて自由に拡張・カスタマイズできることです。ビジネスニーズ。

1. コードの再利用性

カスタム命令は、共通のコード ロジックを 1 つの命令にカプセル化でき、複数の場所で繰り返すことができます。繰り返しコードを記述する作業負荷を軽減します。

2. コードの可読性の向上

組み込み命令を使用する場合、ロジックとビューを一緒に混合する必要があるため、コードの可読性が低下しますが、自動定義ディレクティブを使用します。ロジックとビューを分離し、コードの明瞭さと読みやすさを向上させます。

3. コードの保守性の向上

カスタム命令を使用すると、さまざまなビジネス ロジックを個別に処理できるため、コードの量が削減され、コードの保守性が向上します。コードを保守する際、さまざまなニーズに応じて命令バインディングのロジックを処理すると、コードの複雑さを大幅に軽減できます。

つまり、カスタム命令を使用すると、ビューとロジックを自由に制御できるため、コードを記述する際の柔軟性、便利さ、効率が向上します。これは習得する価値のあるスキルです。

4. カスタム命令の適用シナリオ

1. フォーム検証

フォーム検証は、フロントエンド開発で遭遇する一般的な問題です。カスタム命令を使用すると、検証ロジックを 1 つの命令にカプセル化し、複数の形式で簡単に使用できます。たとえば、フォームが送信されたときにそのフォームが正当であるかどうかを検証する v-validate ディレクティブをカスタマイズできます。

2. 権限制御

カスタム命令により、権限制御機能を簡単に実装できます。たとえば、ユーザーの権限に基づいて要素の表示を制御する v-auth ディレクティブをカスタマイズできます。

3. ページのスクロール

ページがスクロールしているときは、多くの場合、スクロール バーのイベントをリッスンし、それに応じて処理する必要があります。カスタム命令により、スクロール制御機能を簡単に実装できます。たとえば、ページのスクロールに応じて、対応する DOM 要素の表示と非表示を制御する v-scroll ディレクティブをカスタマイズできます。

4. スロットルと手ぶれ補正

スロットルと手ぶれ補正は、ページのパフォーマンスを最適化する方法の 1 つです。 Vue3 では、カスタム命令を通じてスロットリング機能や手ぶれ補正機能も実装できます。たとえば、v-throttle ディレクティブをカスタマイズできます。これにより、頻繁にトリガーされるイベントが、指定された時間間隔の後にトリガーに変換されます。

5. 概要

コマンド関数は、Vue の非常に重要な概念の 1 つです。カスタム命令を使用すると、ビューとロジックを柔軟に制御できるため、コードがより明確になり、効率的になり、保守が容易になります。 v-if や v-show などの単純な組み込み命令と比較して、カスタム命令はより強力であり、さまざまなシナリオに適しています。カスタム ディレクティブを使用してコードをより柔軟にしてみてください。

以上がVue3 の命令関数: カスタム命令によりコードがより柔軟になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。