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属性。

到此这篇关于Vue自定义指令详细的文章就介绍到这了,更多相关Vue自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论