Vue自定义指令 Vue自定义指令详细

1、背景

最近在面试找工作，然后面试官就问了有关自定义指令的问题，然后由于平时自定义指令用的不多，只是看过官方文档大概知道需要用到Vue.directive来自定义指令；面试结束之后，立刻就去网上找有关自定义指令的资料，发现自定义指令还是有很多学问的，于是就想写个博客记录下也是鞭策自己，要多尝试，多学习！！！

这是官方文档有关自定义指令的模块；自定义指令包括全局自定义指令以及局部自定义指令

2、局部自定义指令

果想注册局部指令，组件中也接受一个 directives 的选项：

@Component({
  name: "CustomDirectives",
  components: {},
  directives: {
    //   局部自定义指令
    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 = "加载中...";
        el.style.padding = "10px";
        el.style.color = "#333";
      },
    },
  },
})

3、全局自定义指令

Vue.directive("custom2", {
  inserted(el, binding) {
    console.log("binding", binding);
    if (binding && binding.value) {
      el.innerText = "测试全局自定义指令";
      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 自定义指令钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

4.2 钩子函数参数

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，

包含以下 property：

• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  

4.3 动态指令传参

Vue.directive("custom2", {
  inserted(el, binding) {
    console.log("binding", binding);
    if (binding && binding.value) {
      el.innerText = "测试全局自定义指令";
      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、拓展

问完自定义指令之后，面试官又问了你平时都用到哪些默认的指令？
我回答：v-for v-if v-show v-model等等
然后问题就来了---v-for和v-if能同时使用吗
我答：不能，同时使用会有性能问题。
问：为什么会有性能问题？
我答：如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
问：那如何避免v-for和v-if一起使用呢？
我：？？？ 工作中这种情况遇到的不多，一般都是把v-if放到遍历的循环里面，（其实还是有性能问题）
面试结束之后，去查了下资料，网上说v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。