Shulou(Shulou.com)06/03 Report--

How to understand the usage of Vue2.x and Vue3.x custom instructions and the principle of hook function? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Global registration of Vue2.x usage

Vue.directive (instruction name, {Custom instruction Lifecycle})

Local registration

Directives: {instruction name, {Custom instruction Lifecycle}}

Use

V-instruction name: attribute name. Modifier = "value value"

Hook function

Bind-called when a custom instruction is bound to DOM. Only call once, note: only added to the DOM, but the rendering is not completed

Inserted-the DOM where the custom instruction is located, which is called after it is inserted into the parent DOM. Rendering has been completed (most important)

Update-element update, but child element has not been updated, this hook will be called (the custom instruction will be executed when the component is updated, but the update is not guaranteed)-> related to the custom component

ComponentUpdated-execute after the component and child update (the component update of the custom instruction is completed, and the subcomponent also completes the update)

-> related to custom components

Unbind-unbind (destroy). (executed when the DOM where the custom instruction is located is destroyed). Only call once

Parameters of hook function

Note: this cannot be used directly in custom instructions

1.el: the dom element in which the current instruction is located.

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

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

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

Name:String, instruction name, excluding the v-prefix.

RawName, String, the full instruction name, for example, vMurmyMurdirectiveParaFoo.bar= "1 + 1", and the complete instruction name is vMurmyMYMYRETIVVIZIFOB foo.bar = "1 + 1"

Value:Any, the current value of the instruction binding, for example: in "1 + 1", the binding value is 2. (most important)

Expression:String, which value or expression is parsed. For example, in "1 + 1", the expression is "1 + 1".

OldValue:Any, the previous value bound by the instruction, is only available in update and componentUpdated hooks. Available regardless of whether the value changes or not.

OldArg:Any, the previous value of the instruction property name, is available only in update and componentUpdated hooks. Available regardless of whether the value changes or not.

3.vnode: current node information. You can get the instance vnode.context of the component in which the current instruction resides-the instance object in which the current instruction is located.

4.oldVnode: the last virtual node, available only in update and componentUpdated hooks.

Vue3.x usage

The usage is the same as Vue2.x

Global registration

Vue.directive (instruction name, {Custom instruction Lifecycle})

Local registration

Directives: {instruction name, {Custom instruction Lifecycle}}

Use

V-instruction name: attribute name. Modifier = "value value"

Global registration in the form of plug-ins

The hook function is different from that of Vue2.x.

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 in which the custom instruction is located, after creation

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

Mounted-is the inserted in Vue2.x. The DOM where the custom instruction is located is called after it is inserted into the parent DOM. The rendering has been completed (most important).

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

Updated-componentUpdated in Vue2.x

BeforeUnmount-before destroying

Unmounted-after destruction

This is the answer to the question on how to understand the usage of Vue2.x and Vue3.x custom instructions and the principle of hook function. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.