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

This article will explain in detail how to use custom instructions in vue. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The logic of using custom instructions is the same as that of using event modifiers, and when there is logic related to operating DOM/BOM in methods, it needs to be abstracted into a custom instruction so that the business logic is decoupled from related DOM operations and is easier to be unit tested.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

one。 How to create a custom instruction

Through the Vue.directive global creation directive, the first parameter of Vue.directive defines the name of the directive, and the following code creates an directive called resize.

Vue.directive ("resize", {})

Registering this directive globally means that it can be used in any component, directly in the template of a single-file component, or in JSX. By convention, the instruction name has a "v -" prefix, which is used to indicate that this is a prefix.

two。 When to use custom instructions

The logic of when to use custom instructions is the same as that of using event modifiers.

The use of event modifiers is largely intended to make our code appear data-driven and easy to test, delegating the logic of DOM separately and agreeing to specific modifiers. (notes related to event modifiers: https://www.cnblogs.com/xiaoxuStudy/p/13233379.html#oneone)

In fact, custom instructions are the same logic. When there is logic related to operating DOM/BOM in our methods, we should consider whether it can be abstracted into a custom instruction so that the business logic can be decoupled from related DOM operations and make it easier to be unit tested.

three。 Hook function

Here, Vue strictly follows the opening and closing principle of the design pattern, through the agreed hook function to allow developers to operate components at different times. (hook function correlation on Vue official website: https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0)

1. Hook function

Vue.directive ("resize", {/ / is called only once, and / / is called when the instruction binds an element for the first time. Here you can initialize bind: function (el, binding, value) {}, / / call / / when the bound element is inserted into the parent node (only guarantee the existence of the parent node But not necessarily inserted into the document) inserted: function (el, binding, vnode) {}, / / the component's Vnode update is called / / but may occur before its child VNode update / / the value of the instruction may have changed There may be no / / but unnecessary template update update can be ignored by comparing the values before and after update: function (el, binding, vnode, oldVnode) {}, / / call componentUpdated: function (el, binding, vnode, oldVnode) {}, / / call unbind: function (el, binding, vnode) {},} when the instruction is unbound from the element after all the VNode and its child VNode are updated.

Examples of hook functions

Let's take a look at the first pair of hook functions bind and unbind functions, which, as the name implies, are called when the elements declared by the current directive are bound and unbound, and it is important to remember that both bind and unbind are called only once.

Next, let's look at the hook function inserted. Normally, inserted is called after bind.

The difference between bind and inserted is that the parameter el [XSS _ clean] in bind is the parent node of the current node that can be accessed through el [XSS _ clean] in null,inserted. When there is information that needs to be stored on the parent node and needs to be accessed, inserted is used more frequently than bind.

Next, let's look at the last set of hook functions, update and componentUpdate, which are called before and after the vnode update.

Compared with other hook functions, the parameters passed by update and componentUpdate have one more oldVnode,oldVnode that represents the previous Virtual DOM node information, and vnode represents the current Virtual DOM node information. You can judge whether the template needs to be updated by comparing the differences between oldVnode and vnode, so as to reduce unnecessary template updates and improve component performance to a certain extent.

two。 Hook function parameter

The element bound by the function (/ / instruction) can be used to directly manipulate DOM el, / / binding an object. It contains the following attributes {/ / instruction name, excluding the binding value of the-v prefix name, / / instruction, for example: in "1q1" The binding value is 2 value, and the previous value / / bound by the / / instruction is only available in update and componentUpdated hooks. / / instruction expressions in the form of oldValue, / / string, for example, vmurmyMusure directive = "1cm 1", are optional. / / the parameters of the instruction are optional. / / for example, in v-my-directive:foo, the parameter is "foo" arg, / / an object containing modifiers / / for example: in v-my-directive.foo.bar, / / the modifier object is {foo: true, bar: true} modifiers}, / / the virtual node vnode generated by Vue compilation, / / the last virtual node, and oldVnode is only available in update and componentUpdated hooks)

Hook function parameter

Except for el, all parameters should be read-only and should not be modified. If you need to share data between hooks, it is recommended that you do so through the dataset of the element.

This is the end of this article on "how to use custom instructions in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.