(Detailed explanation) Vue custom instructions

1. Background

In our daily development, we will encounter special operations such as lazy loading of images , and custom instructions like v-model, etc.

 2. Preview in advance (must read)

Custom instructions , like components, also have a life cycle . Our operations are defined in the corresponding life cycle , and then operated, and then pass parameters through the hook function to bind events, etc. (understand first)

2.1 Custom instruction life cycle

• created: called before the attribute or event listener of the bound element is applied;
• beforeMount: Called when the directive is bound to the element for the first time and before the parent component is mounted;
• mounted: Called after the parent component of the bound element is mounted. Most of the custom instructions are written here;
• beforeUpdate: Called before updating the VNode containing the component;
• updated: Called after the VNode containing the component and the VNode of its subcomponents are updated;
• beforeUnmount: Called before unmounting the parent component of the bound element;
• unmounted: only called once when the directive is unbound from the element and the parent component has been unmounted;
   

2.2 Four parameters of life cycle

There are seven hook functions here. There are callback parameters in the hook function. There are four callback parameters. The meaning is basically the same as Vue2:

• el: The element bound by the instruction can be used to directly operate the DOM ( event binding can be performed ).

• binding: various parameters we pass through custom instructions

• vnode: The virtual node generated by Vue compilation.

• oldVnode: The previous virtual node, only available in update and componentUpdated hooks.

3. Custom instructions

3.1 Private custom instructions

3.1.1 Define instructions

In each vue component,   private custom directives can be declared under the directives node. The sample code is as follows:

<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 Using custom instructions

When using custom instructions, you need to add the v- prefix. The sample code is as follows:

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

3.2 Global custom instructions

3.2.1 Define instructions

Globally shared custom instructions need to be declared through the "instance object of a single-page application". The sample code is as follows:

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 Using custom instructions

When using custom instructions, you need to add the v- prefix. The sample code is as follows:

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