Vue custom command details

1. Background

Recently, I was looking for a job in an interview, and the interviewer asked questions about custom commands. Since I don’t use many custom commands, I just read the official documents and probably know that I need to use them.Customize the commands; after the interview, immediately search for information about custom commands online and found that there is still a lot of knowledge about custom commands, so I wanted to write a blog to record them. It is also a motivation for myself to try more and learn more! ! !

This is a module of the official document about custom directives; custom directives include global custom directives and local custom directives

2. Local custom commands

If you want to register a local command, you will also accept one in the component.directives Options:

@Component({
  name: "CustomDirectives",
  components: {},
  directives: {
    // Local custom commands    custom1: {
      inserted(el) {
        ("el", el);
         = "absolute";
         = " 50%";
         = "50%";
         = "translate(-50%,-50%)";
         = "loading...";
         = "10px";
         = "#333";
      },
    },
  },
})

3. Global custom commands

("custom2", {
  inserted(el, binding) {
    ("binding", binding);
    if (binding && ) {
       = "Test global custom directives";
      ("el", el);
       = "absolute";
       = " 50%";
       = "50%";
       = "translate(-50%,-50%)";
       = "10px";
       = "#333";
    }
  },
});

4.1 Custom instruction hook function

• bind: Called only once, and the instruction is called the first time it is bound to an element. Here you can perform one-time initialization settings.
• inserted: Called when the bound element is inserted into the parent node (only the parent node exists, but it may not be inserted into the document).
• update: The component is locatedVNode Called when updated, but may occur in its childVNode Before update. The value of the instruction may have changed or not. However, you can ignore unnecessary template updates by comparing the values ​​before and after the update (see below for detailed hook function parameters).
• componentUpdated: Called after the VNode and its child VNode of the component where the directive is located.
• unbind: Called only once, and is called when the instruction is unbined from the element.

4.2 Hook function parameters

• el: The element bound to the instruction can be used to directly operate the DOM.
• binding: an object,

Includes the following properties:

• name: Directive name, excluding v- prefix.
• value: The binding value of the directive, for example: v-my-directive="1 + 1", the binding value is 2.
• oldValue: The previous value bound by the directive, available only in the update and componentUpdated hooks. Available regardless of whether the value changes or not.
• expression: Instruction expression in the form of a string. For example, in v-my-directive="1 + 1", the expression is "1 + 1".
• arg: Parameters passed to the instruction, optional. For example, in v-my-directive:foo, the parameter is "foo".
• modifiers: An object containing modifiers. For example: In , the modifier object is { foo: true, bar: true }.
• vnode: Vue compiles the generated virtual node. Move the VNode API to learn more.
• oldVnode: Previous virtual node, only in update andcomponentUpdated Available in the hook.
  

4.3 Dynamic command transmission

("custom2", {
  inserted(el, binding) {
    ("binding", binding);
    if (binding && ) {
       = "Test global custom directives";
      ("el", el);
       = "absolute";
       = " 50%";
      const arg = (binding as any).arg;
      [arg] = "50%";
       = "translate(-50%,-50%)";
       = "10px";
       = "#333";
    }
  },
});


 <div v-custom2:[direction]="true"></div>
 
  private direction= 'left';

5. Expand

After asking about the custom commands, the interviewer asked you what default commands do you usually use?
My answer:v-for v-if v-show v-modeletc.
Then the question comes -- can v-for and v-if be used at the same time
My answer: No, there will be performance problems when using it at the same time.
Q: Why are there performance problems?
My answer: If you need to traverse the entire array every time, it will affect the speed, especially when a small part of it needs to be rendered.
Q: So how to avoid using v-for and v-if together?
I:? ? ? Not many cases encountered in work, and usually put v-if into the traversal loop (in fact, there are still performance problems)
After the interview, I checked the information and said onlinev-forandv-ifIt should not be used together, and should be replaced if necessarycomputedproperty.

This is the end of this article about the detailed article about Vue custom commands. For more related contents of Vue custom commands, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!