Vue3 自定义指令学习笔记

1. 什么是自定义指令？

自定义指令在 Vue 中是一个非常重要的概念。它可以让我们在模板中使用一些特定的 DOM 操作，这些 DOM 操作在 Vue 中并没有提供相应的 API，例如改变元素的样式、绑定事件等。

在 Vue3 中，我们可以使用 directive 函数来创建自定义指令，它接收两个参数：

name：指令名称，不需要加 v- 前缀；
options：指令选项对象，包含了指令的相关配置。

2. 自定义指令的生命周期钩子函数

在自定义指令中，我们可以通过实现一些生命周期钩子函数来处理指令的行为。

Vue3 提供了以下的自定义指令生命周期钩子函数：

beforeMount：在绑定元素的父组件挂载之前调用；
mounted：在绑定元素的父组件挂载后调用；
beforeUpdate：在绑定元素的数据更新之前调用；
updated：在绑定元素的数据更新之后调用；
beforeUnmount：在绑定元素的父组件卸载之前调用；
unmounted：在绑定元素的父组件卸载之后调用；
getDynamicBindProps：返回一个数组，包含了所有使用了该指令的绑定属性。

3. 自定义指令的实例

下面是一个使用自定义指令的示例：

htmlCopy Code
<template>
  <div v-my-directive="'hello, world'">这是一个自定义指令的示例</div>
</template>

<script>
import { directive } from 'vue'

const MyDirective = {
  beforeMount(el, binding) {
    el.textContent = binding.value.toUpperCase()
  }
}

export default {
  directives: {
    'my-directive': MyDirective
  }
}
</script>

在上面的示例中，我们定义了一个名为 MyDirective 的自定义指令，并在组件中通过 directives 选项来注册这个指令。我们将这个自定义指令应用到了一个 <div> 元素上，并传入了一个字符串 'hello, world' 作为指令的参数，在 beforeMount 生命周期钩子函数中将这个字符串转化为大写字母，并赋值给该元素的 textContent 属性。

4. 总结

自定义指令是 Vue 中非常重要的一个概念，它可以让我们在模板中使用一些特定的 DOM 操作。在 Vue3 中，我们可以使用 directive 函数来创建自定义指令，并通过实现生命周期钩子函数来处理指令的行为。