vue3.0自定义指令（drectives)

在大多数状况下，你均可以操做数据来修改视图，或者反之。可是仍是避免不了偶尔要操做原生 DOM，这时候，你就能用到自定义指令。

举个例子，你想让页面的文本框自动聚焦，在没有学习自定义指令的时候，咱们可能会这么作。

const app = Vue.createApp({
  mounted(){
    this.$refs.input.focus();
  },  
  template: `<input type="text" ref="input" />`,
});

在mounted钩子函数里，经过 $refs 获取须要聚焦的 DOM 元素，而后调用 focus 方法完成自动聚焦的功能。

基本使用

上面作法已经实现了咱们须要的功能，可是假如说咱们有多个组件都须要这个功能，那咱们只能把这段代码复制过去，从新实现逻辑。咱们下面看下若是使用自定义指令，应该怎么作。

const app = Vue.createApp({
  // 经过 v-[自定义指令名称] 绑定自定义指令
  template: `<input type="text" v-focus/>`,
});
// 注册一个全局自定义指令
app.directive('focus',{
  // 当被绑定的元素插入到DOM的时候执行..
  mounted(el){
    el.focus();
  }
})

如上，咱们定义了一个全局自定义指令 focus，并经过 v-focus 绑定到须要聚焦的 input 元素上。若是，其余组件或模块也须要聚焦功能，只要简单的绑定此指令便可。

自定义指令的钩子函数

咱们在上面定义指令的时候，会发现其中包含了 mounted 钩子函数，指令还提供了以下钩子函数，咱们用代码的形式来给你们列出来。

app.directive('directiveName', {
  // 指令绑定元素挂载前
  beforeMount(el) {},
  // 指令绑定元素挂载后
  mounted(el, binding) {},
  // 指令绑定元素由于数据修改触发修改前
  beforeUpdate(el) {},
  // 指令绑定元素由于数据修改触发修改后
  updated(el) {},
  // 指令绑定元素销毁前
  beforeUnmount(el) {},
  // 指令绑定元素销毁后
  unmounted(el) {},
});

效果就不一一列举了，有兴趣你们能够尝试下分别触发这些钩子函数。指令钩子函数大部分与组件很相似，你们能够对比着来看。

动态指令参数

下面，咱们再来看一个例子。

const app = Vue.createApp({
  template: `<div class="box" v-abs-top="num" style="position:absolute;" ></div>`,
});
// 在不少时候，你可能想在 mounted 和 updated 时触发相同行为，而不关心其它的钩子，就这样写
app.directive('absTop', (el) => {
  el.style[binding.arg] = '100px';
});

咱们在 div 元素上绑定 absTop 指令，div 元素自己定位是 absolute，指令执行让绑定元素的 top 为 100px。这时候，我想在绑定指令的时候可以传一个参数，使得元素的 top 值能够根据参数来改变。代码以下：

const app = Vue.createApp({
  data() { return { num: 100 } },
  template: `<div class="box" v-abs-top="num"></div>`,
});
app.directive('absTop', (el, binding) => {
  el.style.top = binding.value + 'px';
});

元素能够经过 v-directive="value" 传入动态参数，指令经过钩子函数的第二个参数 binding.value 来接收参数。

若是其余元素可能不是修改 top 的值，有多是 left、right 或者 bottom，那么指令能够动态指定吗？其实也是能够作到的。首先，咱们修改模板为：

<div class="box" v-abs:left="num"></div>

而后修改指令自己

app.directive('absTop', (el, binding) => {
  el.style[binding.arg] = binding.value + 'px';
});

在 v-mydirective:[argument]="value" ，arguments 也是能够动态改变的，这样，就能够完美的实现上述要求了。

组件的使用

组件中绑定指令与 DOM元素绑定指令并无什么不一样，指令会获取组件的原生 根DOM  来操做。可是要注意的是，在 vue3.0 中，组件可能有多个根节点，指令绑定在多根节点组件是有问题的。

局部自定义指令

最后，再来简单说下局部自定义指令是怎么定义的。

const app = Vue.createApp({
directives: {
    focus: {
      // 指令的定义
      mounted(el) {
        el.focus()
      }
    }
  }
}

局部指令定义和全局指令基本一致，如上所示，在组件中定义 directives 就能够了。

总结

自定义指令能够提取出原生DOM操做的逻辑。因此指令的应用范围主要表如今，当一些操做涉及到 DOM 底层时，并且操做逻辑可能用于多处地方，就适合用指令来封装这些逻辑。