Vue3（自定义指令directive详解）

前言

在Vue3中，自定义指令是一种强大的工具，允许开发者扩展和增强HTML元素的功能。以下是对Vue3中自定义指令的详细解析：

一、自定义指令的生命周期钩子

Vue3中的自定义指令提供了多个生命周期钩子函数，允许开发者在指令的不同阶段执行特定的操作。这些钩子函数包括：

• created：在绑定元素的attribute或事件监听器被应用之前调用。
• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
• mounted：在绑定元素的父组件被挂载后调用，此时元素已经被插入到DOM中，可以进行DOM操作。
• beforeUpdate：在更新包含组件的VNode之前调用。
• updated：在包含组件的VNode及其子组件的VNode更新后调用。
• beforeUnmount：在卸载绑定元素的父组件之前调用。
• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

二、自定义指令的创建与注册+使用

在Vue3中，自定义指令可以通过全局或局部的方式进行注册。

1. 全局注册：
   全局注册的指令在整个应用中都可用。通常在应用的入口文件（如main.js或main.ts）中进行注册。
   示例代码：

import { createApp } from 'vue'
import App from './App.vue'
import 'vant/lib/index.css'
import './style.css'

import { Directive,DirectiveBinding } from 'vue';

// 定义一个全局指令
const myGlobalDirective = {
    mounted(el:HTMLElement, binding:DirectiveBinding<any>) {
        console.log("我是全局指令");
        console.log(el);
        console.log(binding.value);
      // 在这里添加你的指令逻辑
      el.style.color = binding.value.color || 'black';
      el.style.background = binding.value.background || 'black';
    },
    // 你可以根据需要添加其他生命周期钩子
  };
const app = createApp(App)

//  全局注册指令
app.directive('my-global', myGlobalDirective);
app.mount('#app')

模板中使用全局指令


2. 局部注册
局部注册的指令仅在指定的组件中有效。

模板中使用

三、扩展 简化形式​

对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // 这会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})

总结

综上所述，Vue3中的自定义指令是一种强大的工具，允许开发者根据项目需求扩展Vue的功能。通过合理使用自定义指令，可以提升代码的复用性和可维护性，同时增强应用的交互性和用户体验。