1. 背景

私たちの日々の開発では、画像の遅延読み込みや v-model などのカスタム命令などの特殊な操作に遭遇することがあります。

2. 事前プレビュー（必読）

コンポーネントと同様に、カスタム命令にもライフサイクルがあり、操作は対応するライフサイクルで定義され、操作され、フック関数を介してパラメータを渡してイベントなどをバインドします（最初に理解してください）。

2.1 カスタム命令のライフサイクル

created: バインドされた要素の属性またはイベントリスナーが適用される前に呼び出されます。
beforeMount: ディレクティブが初めて要素にバインドされるとき、親コンポーネントがマウントされる前に呼び出されます。
マウント: バインドされた要素の親コンポーネントがマウントされた後に呼び出されます。ほとんどのカスタム命令はここに記述されます。
beforeUpdate: コンポーネントを含む VNode を更新する前に呼び出されます。
updated: コンポーネントを含む VNode とそのサブコンポーネントの VNode が更新された後に呼び出されます。
beforeUnmount: バインドされた要素の親コンポーネントをアンマウントする前に呼び出されます。
unmounted: ディレクティブが要素からバインドされておらず、親コンポーネントがアンマウントされている場合に 1 回だけ呼び出されます。

2.2 ライフサイクルの 4 つのパラメーター

ここには 7 つのフック関数がありますフック関数にはコールバックパラメータがありますコールバックパラメータは 4 つあります意味は基本的に Vue2 と同じです:

el: 命令でバインドされた要素を使用して、DOMを直接操作できます(イベントバインディングが可能)。
バインディング: カスタム命令を通じて渡すさまざまなパラメーター
vnode: Vue コンパイルによって生成された仮想ノード。
oldVnode: 以前の仮想ノード。update フックとcomponentUpdated フックでのみ使用できます。

3. カスタム指示

3.1 プライベートカスタム命令

3.1.1 命令の定義

各 vue コンポーネントでは、プライベートカスタムディレクティブをディレクティブノードの下で宣言できます。サンプルコードは次のとおりです。

<script>
export default {
  directives: {
      // 自定义私有指令focus，在使用的时候要用 v-focus 。
    focus: {
      mounted(el, binding, vnode) => {
        //el是对应的dom，可以通过el给对应添加事件监听 el.addEventListener
        // binding.value 就是通过 = 绑定的值，在传值的时候传到这 binding.value
        //vnode是节点
        }
    },
  },
}
</script>

3.1.2 カスタム命令の使用

カスタム命令を使用する場合は、v- 接頭辞を追加する必要があります。サンプルコードは次のとおりです。

<!-- 声明自定义私有指令focus，在使用的时候要用 v-focus 。 -->    
<input v-focus/>

3.2 グローバルカスタム命令

3.2.1 命令の定義

グローバルに共有されるカスタム命令は、「シングルページアプリケーションのインスタンスオブジェクト」を通じて宣言する必要があります。サンプルコードは次のとおりです。

import { createApp } from 'vue'
 
const app = createApp({
  /* ... */
})
 
// 注册（对象形式的指令）
app.directive('my-directive', {
  /* 自定义指令钩子 */
    mounted(el, bindings) {
      
    }
 
})
 
// 注册（函数形式的指令）
app.directive('my-directive', (el, binding, vnode) => {
        //el是对应的dom，可以通过el给对应添加事件监听 el.addEventListener
        // binding.value 就是通过 = 绑定的值，在传值的时候传到这 binding.value
        //vnode是节点
        })

3.2.2 カスタム命令の使用