Vue3场景应用之自定义指令

生命周期

created：在绑定元素的 attribute 或事件监听器被应用之前调用；

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；

mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里；

beforeUpdate：在更新包含组件的 VNode 之前调用；

updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；

beforeUnmount：在卸载绑定元素的父组件之前调用；

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

生命周期四个参数

这里七个钩子函数，钩子函数中有回调参数，回调参数有四个，含义基本上和 Vue2 一致：

el：指令所绑定的元素，可以用来直接操作 DOM（可以进行事件绑定）。

binding：我们通过自定义指令传递的各种参数

vnode：Vue 编译生成的虚拟节点。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

模板代码

自定义指令例子

这里我们定义了一个名为 my-directive 的全局自定义指令，它在绑定到元素上时，将元素的文本颜色设置为指令的值。

使用自定义指令

在上述代码中，我们给 v-my-directive 指令传递了一个值 'red'，这个值会在指令的 binding 对象中被接收，然后用于改变元素的文本颜色。

参数和修饰符

自定义指令也可以接受参数和修饰符。参数可以通过指令表达式传递，修饰符可以用于改变指令行为。例如：

自定义防抖节流指令

可以创建自定义指令来实现防抖和节流的功能，以控制事件的触发频率。以下是一个示例，演示如何创建一个自定义防抖指令和一个自定义节流指令。

1. 自定义防抖指令

防抖是指在一段连续触发的事件中，只执行最后一次触发的操作。首先，创建一个 v-debounce 指令：

在上述代码中，我们创建了一个 v-debounce 指令，它会在输入框的 input 事件上进行防抖操作。你可以将该指令用于任何需要延迟处理输入事件的地方。

2. 使用自定义防抖指令

在组件模板中使用自定义防抖指令如下：

这里我们使用了 v-debounce 指令，并将 handleInput 方法作为指令的绑定值，这样在输入事件触发时，handleInput 方法会被防抖执行。

自定义节流指令

节流是指在一段连续触发的事件中，每隔一定时间执行一次操作。下面是一个 v-throttle 自定义指令的示例：

在上述代码中，我们创建了一个 v-throttle 指令，它会在点击事件上进行节流操作。你可以将该指令用于需要限制点击频率的元素。

使用自定义节流指令

在组件模板中使用自定义节流指令如下：

这里我们使用了 v-throttle 指令，并将 handleClick 方法作为指令的绑定值，这样点击事件会被节流执行。

创建插件防抖节流指令

创建插件

注册插件

使用通用防抖和节流指令