Understand the usage of Vue2.x and Vue3.x custom instructions and the principle of hook functions

Vue2.x Usage

Global Registration

Vue.directive(directive name, {custom directive lifecycle})

Partial Registration

directives: {directive name, {custom directive lifecycle} }

use

v-instruction name: attribute name.modifier="value"

Hook function

bind - Called after the custom directive is bound to the DOM. Called only once. Note: It is only added to the DOM, but the rendering is not completed.

inserted - The DOM where the custom instruction is located, called after being inserted into the parent DOM, rendering is completed (the most important)

update - The element is updated, but the child elements have not been updated yet. This hook will be called (it is executed when the component where the custom directive is located is updated, but the update is not guaranteed to be completed) —> Related to the component where the custom directive is located

componentUpdated - executed after the component and its children are updated (the component where the custom directive is located is updated, and the child components are also updated),

—> Related to the custom component

unbind - unbind (destroy). (Executed when the DOM where the custom instruction is located is destroyed). Only called once

Hook function parameters

Note: In custom instructions, you cannot use this directly

1. el: The DOM element where the current instruction is located.

2. binding: is an object that represents the attributes, modifiers, value, and other information on the current instruction. Only value is important, commonly used

arg : String, attribute name. For example, in v-my-directive:foo, the attribute name is "foo".

modifiers ：Object, an object containing all modifiers. For example: in v-my-directive.foo.bar, the modifier object is { foo: true, bar: true }.

name ：String, directive name, excluding the v- prefix.

rawName , String, full directive name, for example, in v-my-directive:foo.bar="1 + 1", the full directive name is v-my-directive:foo.bar="1 + 1"

value ：Any, the current value of the directive binding, for example: in v-my-directive="1 + 1", the bound value is 2. (Most important)

expression : String, which value or expression to parse. For example, in v-my-directive="1 + 1", the expression is "1 + 1".

oldValue : Any, the previous value bound to the directive, only available in update and componentUpdated hooks. Available whether the value has changed or not.

oldArg ：Any, the previous value of the directive attribute name, only available in update and componentUpdated hooks. Available whether the value has changed or not.

3. vnode : current node information, you can get the instance of the component where the current instruction is located vnode.context - the instance object where the current instruction is located

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

Vue3.x Usage

Usage is the same as Vue2.x

Global Registration

Vue.directive(directive name, {custom directive lifecycle})

Partial Registration

directives: {directive name, {custom directive lifecycle} }

use

v-instruction name: attribute name.modifier="value"

Global registration as a plugin

Hook function

Compared with Vue2.x, the hook function has changed

The final API is as follows:

const MyDirective = {
  created(el, binding, vnode, prevVnode) {}, // Add beforeMount() {},
  mounted() {},
  beforeUpdate() {}, // Add updated() {},
  beforeUnmount() {}, // Add unmounted() {}
}

created - the component where the custom directive is located, after creation

beforeMount - is bind in Vue2.x, called after the custom instruction is bound to the DOM. Only called once, note: it is only added to the DOM, but the rendering is not completed

mounted - is inserted in Vue2.x, the DOM where the custom instruction is located, called after being inserted into the parent DOM, rendering is completed (the most important)

beforeUpdate - The DOM where the custom instruction is located, called before updating

updated - is componentUpdated in Vue2.x

beforeUnmount - before destroying

unmounted - after being destroyed

The above is the detailed content for understanding the usage of Vue2.x and Vue3.x custom instructions and the principles of hook functions. For more information about Vue2.x and Vue3.x, please pay attention to other related articles on 123WORDPRESS.COM!