Vue2.x および Vue3.x のカスタム命令の使用方法とフック関数の原理を理解する

Vue2.x の使用法

グローバル登録

Vue.directive(ディレクティブ名、{カスタムディレクティブライフサイクル})

部分登録

ディレクティブ: {ディレクティブ名、{カスタムディレクティブのライフサイクル} }

使用

v-命令名: 属性名.modifier="値"

フック機能

bind - カスタム ディレクティブが DOM にバインドされた後に呼び出されます。1 回だけ呼び出されます。注: DOM に追加されるだけで、レンダリングは完了しません。

inserted - カスタム命令が配置されている DOM。親 DOM に挿入された後に呼び出され、レンダリングが完了します (最も重要)

update - 要素は更新されましたが、子要素はまだ更新されていません。このフックが呼び出されます（カスタムディレクティブが配置されているコンポーネントが更新されたときに実行されますが、更新が完了することは保証されません）—>カスタムディレクティブが配置されているコンポーネントに関連します

componentUpdated - コンポーネントとその子コンポーネントが更新された後に実行されます（カスタムディレクティブが配置されているコンポーネントが更新され、子コンポーネントも更新されます）。

—> カスタムコンポーネントに関連する

unbind - バインド解除 (破棄)。(カスタム命令が配置されている DOM が破棄されたときに実行されます)。1 回だけ呼び出されます。

フック関数のパラメータ

注: カスタム指示ではこれを直接使用することはできません

1. el:現在の命令が配置されている DOM 要素。

2. binding:現在の命令の属性、修飾子、値、その他の情報を表すオブジェクトです。価値だけが重要であり、一般的に使用される

arg : 文字列、属性名。たとえば、v-my-directive:foo では、属性名は「foo」です。

modifiers ：オブジェクト、すべての修飾子を含むオブジェクト。たとえば、v-my-directive.foo.bar では、修飾子オブジェクトは { foo: true, bar: true } です。

name ：v-プレフィックスを除いたディレクティブ名の文字列。

rawName 、文字列、完全なディレクティブ名。たとえば、v-my-directive:foo.bar="1 + 1" の場合、完全なディレクティブ名は v-my-directive:foo.bar="1 + 1" です。

value ：任意、ディレクティブバインディングの現在の値。たとえば、v-my-directive="1 + 1" の場合、バインドされた値は 2 です。 （最も重要）

expression : 解析する値または式を表す文字列。たとえば、v-my-directive="1 + 1" の場合、式は "1 + 1" になります。

oldValue : 任意、ディレクティブにバインドされた以前の値。update および componentUpdated フックでのみ使用できます。値が変更されたかどうかに関係なく使用できます。

oldArg ：任意、ディレクティブ属性名の以前の値。update および componentUpdated フックでのみ使用可能。値が変更されたかどうかに関係なく使用できます。

3. vnode : 現在のノード情報。現在の命令が配置されているコンポーネントのインスタンスを取得できます。vnode.context - 現在の命令が配置されているインスタンスオブジェクト

4. oldVnode : 以前の仮想ノード。update フックと componentUpdated フックでのみ使用できます。

Vue3.x の使用法

使い方はVue2.xと同じです

グローバル登録

Vue.directive(ディレクティブ名、{カスタムディレクティブライフサイクル})

部分登録

ディレクティブ: {ディレクティブ名、{カスタムディレクティブのライフサイクル} }

使用

v-命令名: 属性名.modifier="値"

プラグインとしてのグローバル登録

フック機能

Vue2.xと比較して、フック関数が変更されました

最終的な API は次のようになります。

定数MyDirective = {
  created(el, binding, vnode, prevVnode) {}, // beforeMount() を追加 {},
  マウント() {},
  beforeUpdate() {}, // updated() {} を追加,
  beforeUnmount() {}, // unmounted() {} を追加
}

created - 作成後にカスタムディレクティブが配置されるコンポーネント

beforeMount - Vue2.x ではバインドされ、カスタム命令が DOM にバインドされた後に呼び出されます。1 回だけ呼び出されます。注意: DOM に追加されるだけで、レンダリングは完了しません。

mounted - Vue2.x に挿入され、カスタム命令が配置されている DOM が親 DOM に挿入された後に呼び出され、レンダリングが完了する (最も重要)

beforeUpdate - 更新前に呼び出される、カスタム命令が配置されているDOM

updated - Vue2.x ではコンポーネント更新されています

beforeUnmount - 破棄する前に

破壊された後、 unmounted

上記は、Vue2.x および Vue3.x カスタム命令の使用方法とフック関数の原理を理解するための詳細な内容です。Vue2.x および Vue3.x の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。