Vue3 のディレクティブ機能: カスタム命令は Vue3 の機能を拡張します

Vue3 は Vue の最新バージョンであり、Vue2 と比較して多くの点でアップグレードおよび改良が加えられています。ディレクティブ機能は Vue3 の新機能で、命令をカスタマイズして Vue3 の機能を拡張することができます。

ディレクティブとは何ですか?

ディレクティブは、Vue によって提供される特別なコンポーネント属性であり、テンプレートに特定の動作を追加するために使用されます。ディレクティブは、要素を操作してその外観や動作を変更する AngularJS の一般的なディレクティブと考えることができます。たとえば、Vue で一般的な v-if、v-for、v-bind などはすべて命令です。

Vue3 の命令は関数に基づいています。これは、関数を使用してカスタム命令を作成できることを意味します。これらのディレクティブ関数は、アプリケーションが初期化される前に Vue と組み合わせる必要があり、要素、コンポーネント、または他の DOM ノードで使用できます。

命令関数の構文形式は次のとおりです。

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  },
  mounted(el, binding, vnode) {
    // ...
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    // ...
  },
  updated(el, binding, vnode, prevVnode) {
    // ...
  },
  beforeUnmount(el, binding, vnode) {
    // ...
  },
  unmounted(el, binding, vnode) {
    // ...
  }
}

命令関数は、オブジェクトを作成することによって定義されます。このオブジェクトには 6 つのメソッドがあり、マウント、更新、アンマウント時のコマンドのさまざまな段階を表します。各メソッドには、要素、バインディング オブジェクト、仮想ノードという 3 つのパラメータがあります。

上記のコードでは、各関数に 3 つのパラメーターがあることがわかります。

• el (HTMLElement): 命令がバインドされる要素。 (例: v-myDirective ディレクティブを使用する場合、el はディレクティブがバインドされる要素です)
• binding (DirectiveBinding): ディレクティブ情報を含むオブジェクト。 (例: 命令の名前、値、パラメータなどが含まれます)
• vnode (VNode): Vue によって生成された仮想ノード。 (例: v-myDirective ディレクティブを使用する場合、vnode はディレクティブを含むコンポーネントまたは要素の仮想ノードです)

次に、カスタム ディレクティブの作成方法を見てみましょう。

カスタム ディレクティブを作成する

カスタム ディレクティブを作成するには、Vue が提供するディレクティブ関数を使用する必要があります:

import { Directive } from 'vue'

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  }
}

Vue.directive('my-directive', myDirective)

この例では、ディレクティブを使用します。関数を使用して、my-directive という名前のカスタム ディレクティブを作成し、ディレクティブの定義を関数に渡します。この例では、beforeMount フックのみを定義しました。これは、この命令関数が Vue インスタンスのマウント プロセス中に呼び出されることを意味します。ニーズに応じてフック機能を選択できます。

カスタム ディレクティブの使用

カスタム ディレクティブを定義したら、それを Vue テンプレートで使用できます。特定の HTML 属性を使用してディレクティブをバインドできます。Vue では、この属性は v- プレフィックスで始まります。例:

<div v-my-directive>这是一个自定义指令</div>

この例では、v-my-directive を使用してカスタム ディレクティブを <div> 要素にバインドします。 Vue インスタンスが要素をマウントすると、<code>beforeMount フックが呼び出されます。

概要

Vue3 では命令は関数ベースの API となり、カスタム命令はディレクティブ関数を使用して作成されます。カスタム ディレクティブを要素、コンポーネント、またはその他の DOM ノードで使用して、Vue の機能を拡張できます。

命令関数には 6 つのライフサイクル フックがあり、命令のさまざまな状態にマップされます。開発者は、適切なフック関数の使用を選択して、特定の段階で操作を実行できます。

ディレクティブの主な目的は DOM 操作とインタラクティブな動作を実装することですが、カスタム ディレクティブを使用すると、開発者は特定の動作をディレクティブに簡単にカプセル化し、テンプレート内のディレクティブを呼び出すだけでそれらを実装できます。これらの動作によりコードが作成されます。より簡潔になり、保守と拡張が容易になります。