Vue Custom Instruction Details

Directory 1, Background 2, Local Custom Instruction 3, Global Custom Instruction 4.1 Custom Instruction Hook Function 4.2 Hook Function Parameter 4.3 Dynamic Instruction Parameter Transfer
5. Expand

1. Background

Recently in the interview looking for a job, and then the interviewer asked questions about custom instructions, and then because the usual custom instructions are not used much, just read the official documents probably know that it needs to be used Vue.directive Customize instructions; After the interview, I immediately went to the Internet to find information about custom instructions, and found that there are still a lot of knowledge about custom instructions, so I want to write a blog to record it, which is also a spur to myself. I want to try and learn more! ! !

This is the module of custom instructions in official documents; Custom instructions include global custom instructions and local custom instructions

2. Local custom instructions

If you want to register a local instruction, the component also accepts 1 directives Options for:

@Component({
  name: "CustomDirectives",
  components: {},
  directives: {
    //    Local custom instruction 
    custom1: {
      inserted(el) {
        console.log("el", el);
        el.style.position = "absolute";
        el.style.top = " 50%";
        el.style.left = "50%";
        el.style.transform = "translate(-50%,-50%)";
        el.innerText = " Loading ...";
        el.style.padding = "10px";
        el.style.color = "#333";
      },
    },
  },
})

3. Global custom instructions

Vue.directive("custom2", {
  inserted(el, binding) {
    console.log("binding", binding);
    if (binding && binding.value) {
      el.innerText = " Test global custom instructions ";
      console.log("el", el);
      el.style.position = "absolute";
      el.style.top = " 50%";
      el.style.left = "50%";
      el.style.transform = "translate(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});

4.1 Custom instruction hook function

bind Called only once, the first time an instruction is bound to an element. Here, you can set the initialization once. inserted Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but it is not certain that it has been inserted into the document). update Object of the component VNode Called when updating, but may occur in its child VNode Before updating. The value of the instruction may or may not have changed. However, you can ignore unnecessary template updates by comparing the values before and after updates (see below for detailed hook function parameters). componentUpdated Called after the VNode and its child VNode of the component in which the instruction is located are all updated. unbind Called only once, when the instruction is unbound from the element.

4.2 Hook function parameters

el The element to which the directive is bound can be used to manipulate DOM directly. directives 0 : 1 object,

Contains the following property:

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

4.3 Dynamic instruction transfer

Vue.directive("custom2", {
  inserted(el, binding) {
    console.log("binding", binding);
    if (binding && binding.value) {
      el.innerText = " Test global custom instructions ";
      console.log("el", el);
      el.style.position = "absolute";
      el.style.top = " 50%";
      const arg = (binding as any).arg;
      el.style[arg] = "50%";
      el.style.transform = "translate(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});


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

5. Expand

After asking the custom instructions, the interviewer asked what default instructions you usually use.
I replied: bind0 Wait
Then the question arises-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?
I replied: If you need to traverse the whole array every time, it will affect the speed, especially when it needs to render a small part.
Q: How can we avoid using v-for and v-if1?
Me:? ? ? This kind of situation is not encountered much in the work, 1 is generally put v-if into the loop of traversal, (in fact, there are still performance problems)
After the interview, I checked the information and said online bind1 And v-if Should not be used at one time, and should be replaced with if necessary computed Property.