Vue3自定义指令directives介绍

Vue3自定义指令directives介绍
指令介绍

Vue内置的一系列指令，比如 v-model, v-show, v-if, v-for等等，自定义指令从命名上看主要区别于Vue自带的内置指令，我们可以创建自己想要的指令，使用必须以v-为前缀

分类

局部指令：组件中通过directives选项实现，只能在当前组件中使用
全局指令：应用实例的directive方法，可以在任意组件中被使用（所有内置指令都为全局指令）

自定义指令跟组件一样，也是有生命周期的，下面看一下他的生命周期

生命周期介绍
- created：在绑定元素的 attribute 或事件监听器被应用之前调用；
- beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
- mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里；
- beforeUpdate：在更新包含组件的 VNode 之前调用；
- updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
- beforeUnmount：在卸载绑定元素的父组件之前调用；
- unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；
钩子参数介绍

每个钩子函数中有回调参数，回调参数有四个，含义基本上和 Vue2 一致：
- el：指令所绑定的元素，可以用来直接操作 DOM（可以进行事件绑定）。
- binding：我们通过自定义指令传递的各种参数
- vnode：Vue 编译生成的虚拟节点。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
binding包含以下属性
- value：传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
- oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
- arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
- modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
- instance：使用该指令的组件实例。
- dir：指令的定义对象。
指令的钩子
```
const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount() {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted() {},
  // 绑定元素的父组件更新前调用
  beforeUpdate() {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated() {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount() {},
  // 绑定元素的父组件卸载后调用
  unmounted() {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
```
指令的使用

简单需求：当某个元素挂载完成后可以自动获取焦点

默认的实现方式，假如有多个地方需要使用时，这种实现方式的代码会显得繁杂冗余
```
<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  setup () {
    const input = ref(null);

    onMounted(() => {
      input.value.focus();
    })

    return {
      input
    }
  }
}
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
```
使用自定义指令实现
```
<template>
  <input type="text" v-focus />
</template>
<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>
1
2
3
4
5
6
7
8
9
```
注：在

指令介绍

分类

生命周期介绍

钩子参数介绍

指令的钩子

指令的使用

使用自定义指令实现