Directive function in Vue3: Custom instructions extend Vue3 functions

Vue3 is the latest Vue version. Compared with Vue2, it has been upgraded and improved in many aspects. One of the improvements is the directive function. The directive function is a new function in Vue3. It can be used to customize instructions to extend the functions of Vue3.

What is a directive?

The directive is a special component attribute provided by Vue, which is used to add specific behaviors to the template. Directives can be thought of as common directives in AngularJS that operate on elements, changing their appearance or behavior. For example, the common v-if, v-for, v-bind, etc. in Vue are all instructions.

The instructions in Vue3 are based on functions. This means we can use functions to create custom instructions. These directive functions need to be combined with Vue before the application is initialized, and can be used in elements, components or other DOM nodes.

The syntax format of the instruction function is as follows:

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) {
    // ...
  }
}

The instruction function is defined by creating an object. This object has six methods, representing different stages of the command during mount, update, and unmount. Each method has three parameters, namely the element, the binding object and the virtual node.

In the above code, we can see that each function has three parameters:

• el (HTMLElement): The element to which the instruction is bound. (For example: when using the v-myDirective directive, el is the element to which the directive is bound)
• binding (DirectiveBinding): An object containing directive information. (For example: Contains the name, value, parameters, etc. of the instruction)
• vnode (VNode): The virtual node generated by Vue. (For example: when using the v-myDirective directive, vnode is the virtual node of the component or element containing the directive)

Next, let's take a look at how to create a custom directive.

Create a custom directive

In order to create a custom directive, we need to use the directive function provided by Vue:

import { Directive } from 'vue'

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

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

In this example, we use the directive function to create a A custom directive named my-directive and pass the directive's definition to the function. In this example, we only defined the beforeMount hook, which means that this instruction function will be called during the mounting process of the Vue instance. You can choose the hook function according to your needs.

Using Custom Directives

Once we have defined a custom directive, we can use it in a Vue template. We can bind directives using specific HTML attributes, which in Vue start with the v- prefix. For example:

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

In this example, we use v-my-directive to bind our custom directive to a <div> element. When the Vue instance mounts the element, the <code>beforeMount hook will be called.

Summary

In Vue3, instructions become a function-based API, and custom instructions are created by using the directive function. Custom directives can be used in elements, components, or other DOM nodes to extend the functionality of Vue.

The instruction function has six life cycle hooks, which are mapped to different states of the instruction. Developers can choose to use appropriate hook functions to perform operations at specific stages.

Although the main purpose of directives is to implement DOM operations and interactive behaviors, using custom directives developers can easily encapsulate certain specific behaviors in directives and then implement them by simply calling the directives in the template These behaviors make the code more concise, easier to maintain and expand.