vue3的自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom
Directives)。

1.自定义指令的目的和简单介绍

自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。
一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
举例：在某个场景下，需要一进入页面或者打开某个弹窗就聚焦到指定的输入框。
局部的写法：

<script setup>
const vFocus = {created(el, binding, vnode) {},beforeMount(el, binding, vnode) {},mounted(el) {el.focus()},beforeUpdate(a,b,c,prevNode) { //! 第四个参数 prevNode 只在beforeUpdate和updated才有！},updated() {},beforeUnmount() {// 当指令绑定的元素 的父组件销毁前调用。  <简单讲，指令元素的父组件销毁前调用>},unmounted() {},// 当指令与元素解除绑定且父组件已销毁时调用。
}
</script><template><input v-focus>
</template>

全局的写法：

import { createApp } from 'vue'
const app = createApp(App)
app.directive('focus',{created(el, binding, vnode) {},beforeMount(el, binding, vnode) {},mounted() {el.focus()},beforeUpdate(a,b,c,prevNode) { //! 第四个参数 prevNode 只在beforeUpdate和updated才有！},updated() {},beforeUnmount() {// 当指令绑定的元素 的父组件销毁前调用。  <简单讲，指令元素的父组件销毁前调用>},unmounted() {},// 当指令与元素解除绑定且父组件已销毁时调用。
})

使用全局注册需注意得写在mount(‘#app’)之前，否则会报错

我门可以发现对比vue2来看vue3里自定义指令似乎在生命周期这块发生了某些变化，下面我们来看看具体的。
注意：后面的示例都用局部的自定义指令来讲解。

2.对比vue2自定义指令的生命周期
vue2自定义指令生命周期

bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}

3.vue3自定义组件生命周期

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on
事件监听器调用前的事件监听器中时，这很有用。
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
mounted：在绑定元素的父组件被挂载后调用。
beforeUpdate：在更新包含组件的 VNode 之前调用。
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

这些生命周期都会接受以下几个参数：