Vue3.2 自定义指令详解与实战

一、介绍

在Vue3中，自定义指令为开发者提供了一种灵活的方式来扩展Vue的HTML模板语法，使其能够执行特定的DOM操作或组件逻辑。不同于Vue2.x中的全局和局部指令注册方式，Vue3引入了Composition API，这使得自定义指令的编写和使用更为直观和简洁。

二、创建自定义指令

1. 全局自定义指令

在Vue3中，我们首先需要通过app.directive()方法来注册全局自定义指令：

// 导入createApp和其他必要的库
import { createApp } from 'vue';

// 定义全局自定义指令
const focusDirective = {
  mounted(el) {
    el.focus();
  }
};

// 创建并配置应用实例
const app = createApp(App);

// 注册全局自定义指令
app.directive('focus', focusDirective);

// 挂载应用
app.mount('#app');

上述代码定义了一个名为focus的全局指令，当指令绑定到元素时，会在该元素挂载完成后自动获取焦点。

2. 局部自定义指令

在单个组件内部，我们可以直接在组件选项的directives对象中定义和注册局部指令：

<template>
  <input v-focus />
</template>

<script>
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  directives: {
    focus: {
      mounted(el) {
        onMounted(() => {
          // 防抖优化，避免频繁调用el.focus()
          setTimeout(() => {
            el.focus();
          });
        });
      }
    }
  }
});
</script>

这里我们同样定义了一个focus指令，但它只在当前组件内有效。为了实现防抖效果（debounce），我们在mounted钩子中使用了onMounted函数结合setTimeout来延迟调用el.focus()。

3. 指令参数与生命周期钩子

除了mounted钩子外，自定义指令还可以有其他生命周期钩子，例如beforeMount、updated和unmounted等。每个指令接收四个参数：el（绑定元素）、binding（包含指令信息的对象，如值、修饰符等）、vnode（虚拟节点）和prevVnode（上一个虚拟节点，在更新钩子中可用）。

4. 使用修饰符和动态参数

指令可以接受修饰符和动态参数，例如：

<input v-my-directive.modifier="value" />

在指令处理器中可以通过binding.arg访问到指令名后的参数，通过binding.modifiers访问修饰符。

{
  mounted(el, binding) {
    if (binding.modifiers.myModifier) {
      // 处理myModifier修饰符逻辑
    }
    const paramValue = binding.value; // 访问动态传入的值
  }
}

三、实战案例 - Input自动聚焦

让我们看一个实际的小demo，它使用自定义指令让Input框在渲染后自动获取焦点：

// 全局注册
app.directive('auto-focus', {
  mounted(el) {
    el.focus();
  }
});

// 或者在组件内部注册
directives: {
  autoFocus: {
    mounted(el) {
      el.focus();
    }
  }
}

// 在模板中使用
<input v-auto-focus />

通过以上步骤，我们就成功地在Vue3.2项目中实现了自定义指令的创建和使用，从而增强了Vue的灵活性和可定制性。